/* Vokkl design tokens — THE single source of truth for colour, type, shape.
   ---------------------------------------------------------------------------
   This file and `src/components/vokkl/tokens.ts` are the ONLY two places in the
   frontend allowed to contain a brand hex literal. `npm test` enforces both
   halves of that: one test asserts the two files agree value-for-value, another
   asserts no brand hex appears anywhere else. Add a colour here first.

   Values come from Vokkl_Guidlines1.1.pdf v1.0, with four documented departures,
   each measured against WCAG 2.1 rather than eyeballed:

     1. Green is #2fae67 (the delivered logo artwork), not the #00b05f printed in
        the guidelines. Artwork wins; the PDF should be corrected.
     2. Buttons put NAVY text on green, never white. White on green is 2.85:1 —
        below the 4.5:1 floor and below even the 3:1 large-text floor.
     3. --vokkl-green-ink exists because green itself is 2.85:1 as text on white
        and cannot carry meaning on a light surface.
     4. Lime is secondary-only. The guidelines list it for primary AND secondary,
        which would leave the two indistinguishable.

   THE INK RULE. Every *-ink token is validated against the darkest surface it
   will sit on, not against white. This was learned the hard way: #1b874d cleared
   4.5:1 on white by 0.05, then failed on the page background (4.20:1) and on its
   own success tint (4.12:1). Ratios in the comments below are measured, and the
   second number is always the tightest case. */

:root {
  /* ---- Brand ---------------------------------------------------------- */
  --vokkl-navy:            #0d2b3e;  /* 14.66:1 on white */
  --vokkl-green:           #2fae67;  /* fill only — never text on light */
  --vokkl-green-ink:       #116639;  /* 7.04 on white · 6.37 on green tint */
  --vokkl-lime:            #b8fbb7;  /* secondary fill; navy label = 12.23:1 */

  /* Pair this with EVERY primary fill. 26 sites historically hardcoded #fff
     next to a primary background; that was safe against the old blue and is
     2.85:1 against green. */
  --vokkl-on-primary:      var(--vokkl-navy);

  /* ---- Navy ramp (dark surfaces) -------------------------------------- */
  --vokkl-navy-dark:       #0a2231;
  --vokkl-navy-deep:       #061620;
  --vokkl-navy-mid:        #7a9cb0;  /* muted text on navy — 5.03:1 */
  --vokkl-navy-light:      #8fadbf;  /* body text on navy — 6.21:1 */
  --vokkl-navy-tint:       #eef2f5;  /* navy-tinted light surface */

  /* ---- Text and surface ----------------------------------------------- */
  --vokkl-fg1:             #0d2b3e;  /* 14.66:1 */
  --vokkl-fg2:             #333333;  /* 12.63:1 */
  --vokkl-fg3:             #5f6f79;  /* 5.20 on white · 4.81 on page bg */
  --vokkl-bg:              #f5f6f8;
  --vokkl-surface:         #ffffff;

  /* Card outlines and dividers. Decorative, so the 3:1 non-text floor does not
     apply — an input may NOT rely on this alone, see --vokkl-input-bg. */
  --vokkl-border:          #d3d5d6;
  --vokkl-border-hover:    #b6bbbf;
  --vokkl-divider:         rgba(13, 43, 62, 0.07);

  /* ---- Interaction ----------------------------------------------------- */
  --vokkl-green-hover:     #279257;
  --vokkl-ink-hover:       #0d5530;  /* 8.90:1 on white */
  --vokkl-disabled-bg:     #e3e6e8;
  --vokkl-disabled-fg:     #8b959c;  /* WCAG exempts disabled controls */

  /* Inputs carry their affordance with fill AND border together. The guidelines'
     #d3d5d6 border is 1.47:1 against white — not perceivable on its own — so the
     fill below (the guidelines' own surface grey) does the other half. */
  --vokkl-input-bg:        #f5f6f8;
  --vokkl-focus-ring:      rgba(13, 43, 62, 0.30);

  /* ---- Semantic -------------------------------------------------------- */
  --vokkl-success:         #2fae67;
  --vokkl-success-bg:      #e9f7ef;
  --vokkl-success-text:    #116639;  /* 6.37:1 on its own tint */

  --vokkl-warning:         #fbc024;
  --vokkl-warning-bg:      #fef6e3;
  --vokkl-warning-text:    #8a5a00;  /* 5.51:1 on its own tint */

  --vokkl-danger:          #cf364c;  /* white label = 4.90:1 */
  --vokkl-danger-bg:       #fbeaed;
  --vokkl-danger-text:     #b02a3e;  /* 5.57:1 on its own tint */

  --vokkl-neutral:         #5f6f79;
  --vokkl-neutral-bg:      #f5f6f8;
  --vokkl-neutral-text:    #333333;

  /* AI. Purple, not green — green is reserved for a live call, and an AI accent
     sharing that colour would make brand chrome read as a connected line. */
  --vokkl-ai:              #9e85ee;  /* 4.92:1 on navy */
  --vokkl-ai-bg:           #f1edfc;
  --vokkl-ai-light:        #c9b8f7;  /* 8.16:1 on navy */
  --vokkl-ai-ink:          #6b4fd8;  /* 5.62 on white · 4.89 on its tint */

  /* ---- Type ------------------------------------------------------------ */
  --vokkl-font-display: 'Funnel Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --vokkl-font-body:    'Funnel Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Retained deliberately, scoped to numeric telemetry only — timers, phone
     numbers, durations, IDs. The guidelines are silent on monospace; without
     tabular figures a running call timer reflows on every tick. */
  --vokkl-font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- Shape ----------------------------------------------------------- */
  /* The guidelines specify 10px; `md` is the default. A single 10px everywhere
     bloats small chips, so the scale brackets it. */
  --vokkl-radius-sm:   6px;
  --vokkl-radius-md:   10px;
  --vokkl-radius-lg:   14px;
  --vokkl-radius-xl:   20px;
  --vokkl-radius-full: 9999px;

  /* ---- Elevation — navy-tinted, not slate ------------------------------ */
  --vokkl-shadow-xs: 0 1px 2px rgba(13, 43, 62, 0.05);
  --vokkl-shadow-sm: 0 1px 3px rgba(13, 43, 62, 0.08), 0 1px 2px rgba(13, 43, 62, 0.04);
  --vokkl-shadow-md: 0 4px 12px rgba(13, 43, 62, 0.08), 0 1px 2px rgba(13, 43, 62, 0.04);
  --vokkl-shadow-lg: 0 12px 32px rgba(13, 43, 62, 0.12), 0 2px 6px rgba(13, 43, 62, 0.06);
  --vokkl-shadow-focus: 0 0 0 3px var(--vokkl-focus-ring);
}