/* ================================================================
   TOKENS — the design system's custom properties.

   Split out from global.css so it can be loaded on its own in wp-admin. The admin
   needs the variables (ACF field previews and the block editor read them) but must
   not receive global.css's base element styles, which would repaint the admin
   chrome — this design is dark-first, so a stray `body` rule turns the whole
   dashboard black.

   This is the one place colours, fonts and spacing are defined. Blocks consume these
   variables and must never redefine the palette, so a rebrand stays a one-file
   change. The only sanctioned override is on a block's own root element, e.g. a
   block on a light panel redefining --text and --muted for its own subtree.
   ================================================================ */

:root {
  /* Brand ------------------------------------------------------- */
  --accent:      #5ad05a;
  --accent-d:    #3fb83f;   /* darker variant */
  --accent-l:    #6fdc6f;   /* lighter variant */
  --accent-rgb:  90, 208, 90;  /* keep in sync with --accent, for rgba() tints */

  /* The brand green is a fill colour, not a text colour: --accent on white is about
     1.9:1, so it fails WCAG AA badly as copy. This is the green dark enough to set
     type in on a white panel — 5.1:1 on #ffffff. Use it only for text on light;
     fills and rules stay --accent. */
  --accent-ink:  #2e7d32;

  /* Neutrals ----------------------------------------------------
     Franklyn Elite Sports is a dark-first design: the default surface is
     near-black and body copy is light. The inverse pair (--ink / --bg-invert)
     is for the white panels the design drops in for CTAs, cards and the
     contact form — a block on white redefines --text/--muted on its own root. */
  --text-on-dark:   #ffffff;
  --muted-on-dark:  #c9cfc9;
  --border-on-dark: rgba(255, 255, 255, 0.18);

  /* A second, dimmer grey for meta text that must sit back from body copy —
     the footer's sponsor label and the SJP legal bar. */
  --muted-2-on-dark: #8e968e;

  /* The page default is the dark surface, so --text/--muted point at the
     on-dark pair. A block that drops a dark card inside a white panel (the
     contact details card, the testimonial modal) reaches for the --*-on-dark
     tokens directly rather than hardcoding the values back in. */
  --text:        var(--text-on-dark);
  --muted:       var(--muted-on-dark);
  --muted-2:     var(--muted-2-on-dark);
  --border:      var(--border-on-dark);
  --dark:        #0b0c0b;   /* deepest — legal bar, overlays */

  /* Inverse (content sitting on white) -------------------------- */
  --ink:            #121412;
  --ink-2:          #4a524a;
  --border-ink:     rgba(18, 20, 18, 0.14);
  --bg-invert:      #ffffff;
  --bg-invert-h:    #edefed;   /* hover for solid-white buttons */
  --green-ink:      #0e1c0e;   /* text on an --accent fill */

  /* Surfaces ---------------------------------------------------- */
  --bg-base:     #121412;
  --bg-alt:      #1b1e1b;   /* raised dark surface, cards on black */

  /* Type -------------------------------------------------------- */
  --f-display:   'Poppins', 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --f-body:      'Poppins', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-mono:      ui-monospace, SFMono-Regular, Menlo, monospace;
  --f-script:    'Brush Script MT', 'Segoe Script', cursive;  /* signatures */

  /* Metrics ----------------------------------------------------- */
  --container:      1160px;
  /* The site chrome runs wider than the content column — the header, sub-nav,
     footer and legal bar all sit on this measure in the design. */
  --container-wide: 1320px;
  --space-section:  clamp(3rem, 8vw, 5.5rem);
  --space-gutter:   clamp(1rem, 4vw, 1.5rem);
  --radius:         2px;

  /* Motion ------------------------------------------------------ */
  --dur:  0.22s;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}