/* ============================================================================
   TOKENS  —  @layer tokens
   Two tiers: (1) primitives = the ONLY place raw values live; (2) semantic
   aliases = intent-based, the ONLY tokens components may use.
   Every color pairing used as text/UI is verified >= WCAG 2.2 AA by
   tests/unit/tokens.test.mjs (which resolves var() chains and computes contrast).
   ============================================================================ */

/* Self-hosted signage face — Overpass (Highway-Gothic / FHWA road-sign lineage),
   subsetted to Latin + Latin-Extended + currency/math, variable wght 400–800.
   One ~58KB woff2, precached by the SW → fully offline, zero third-party requests.
   Used for the DISPLAY role only (headings, airport codes, sign-plates, phase
   labels); body prose and mono board-data stay on the system stacks. */
@font-face {
  font-family: 'Overpass';
  font-style: normal;
  font-weight: 400 800;      /* variable weight axis */
  font-display: swap;        /* system fallback paints instantly; offline-safe */
  src: url('../assets/fonts/overpass-subset.woff2') format('woff2');
}

@layer tokens {
  :root {
    /* ---- Tier 1: PRIMITIVES (raw, non-semantic) ------------------------- */

    /* Neutrals — near-monochrome signage base (near-black on off-white) */
    --ink-900:  #14181f;   /* near-black — body text */
    --ink-700:  #2b3542;   /* strong secondary */
    --slate-600:#4b5563;   /* muted text */
    --slate-500:#6b7280;   /* strong border (control edges, >=3:1) */
    --slate-300:#d0d7e2;   /* hairline border */
    --slate-100:#eef2f7;   /* sunken surface */
    --slate-50: #f7f8fa;   /* page background */
    --white:    #ffffff;   /* surface */

    /* Accent — single strong directional blue (like a wayfinding sign arrow) */
    --blue-600: #1a4fd0;   /* accent (links, primary) */
    --blue-700: #163fa6;   /* accent hover/active */
    --blue-100: #e6eefc;   /* accent tint background */

    /* Functional signal colors */
    --amber-500:#f59e0b;   /* bright warning signal (icon / bar fill) */
    --amber-700:#b45309;   /* warning as text/emphasis (AA on bg) */
    --amber-100:#fef3e2;   /* warning tint background */
    --red-600:  #dc2626;   /* bright danger signal (bar fill) */
    --red-700:  #b91c1c;   /* danger as text/strong (AA on bg) */
    --red-100:  #fdecec;   /* danger tint background */
    --green-700:#147032;   /* success/complete (AA on both page bg and success-tint) */
    --green-100:#e7f6ec;   /* success tint background */

    /* Signage board — the "departures board" surface (dark in BOTH themes) and its
       live amber signal. A lit sign, not a card. */
    --plate-900:#0d1422;   /* board base */
    --plate-800:#152134;   /* board raised (top of gradient) */
    --plate-line:#27334c;  /* board hairline */
    --plate-100:#eaf0f8;   /* board ink */
    --plate-300:#94a3bb;   /* board muted (>=4.5 on board) */
    --sign-amber:#ffb020;  /* departures signal (>=4.5 on board) */
    --led-good: #37c46e;   /* status LED */

    /* Spacing — 4px base */
    --space-0: 0;
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-8: 3rem;      /* 48px */
    --space-10:4rem;      /* 64px */

    /* Type scale — modular, strong Swiss hierarchy through size/weight */
    --text-xs:  0.8125rem;  /* 13px — meta */
    --text-sm:  0.9375rem;  /* 15px — secondary */
    --text-base:1.0625rem;  /* 17px — body (comfortable for tired eyes) */
    --text-lg:  1.25rem;    /* 20px — step titles */
    --text-xl:  1.625rem;   /* 26px — phase headers */
    --text-2xl: 2.25rem;    /* 36px — page title */
    --leading-tight: 1.2;
    --leading-normal:1.55;
    --weight-normal: 400;
    --weight-medium: 500;
    --weight-bold:   700;
    --weight-black:  800;   /* signage-plate headings */
    --tracking-tight:-0.01em;
    --tracking-caps: 0.06em; /* uppercase sign labels */

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;

    /* Elevation — restrained; signage is flat */
    --shadow-1: 0 1px 2px rgba(20,24,31,0.06), 0 1px 1px rgba(20,24,31,0.04);
    --shadow-2: 0 4px 12px rgba(20,24,31,0.08), 0 2px 4px rgba(20,24,31,0.05);

    /* Motion — minimal, purposeful */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dur-fast: 120ms;
    --dur-base: 220ms;

    /* Layout */
    --content-max: 40rem;   /* single-column reading measure */
    --border-1: 1px;
    --border-2: 2px;
    --border-bar: 4px;      /* signage left-edge signal bar */

    /* Focus ring geometry */
    --focus-ring-width: 3px;
    --focus-ring-offset: 2px;


    /* ---- Tier 2: SEMANTIC ALIASES (intent-based; components use ONLY these) */

    --color-bg:            var(--slate-50);
    --color-surface:       var(--white);
    --color-surface-sunken:var(--slate-100);

    --color-text:          var(--ink-900);
    --color-text-strong:   var(--ink-900);
    --color-text-muted:    var(--slate-600);

    --color-accent:        var(--blue-600);
    --color-accent-strong: var(--blue-700);
    --color-accent-tint:   var(--blue-100);
    --color-on-accent:     var(--white);

    --color-warning:       var(--amber-700);  /* text/emphasis (AA) */
    --color-warning-signal:var(--amber-500);  /* bright icon/bar */
    --color-warning-tint:  var(--amber-100);

    --color-danger:        var(--red-700);     /* text/strong (AA) */
    --color-danger-signal: var(--red-600);     /* bright bar */
    --color-danger-tint:   var(--red-100);

    --color-success:       var(--green-700);
    --color-success-tint:  var(--green-100);
    --color-on-status:     var(--white);       /* text on solid danger/success/accent */

    --color-border:        var(--slate-300);
    --color-border-strong: var(--slate-500);   /* control edges (>=3:1) */
    --color-focus:         var(--blue-600);

    /* Signage board surface + signal (dark in both themes; dark blocks lift it). */
    --color-plate:         var(--plate-900);
    --color-plate-raised:  var(--plate-800);
    --color-plate-line:    var(--plate-line);
    --color-plate-ink:     var(--plate-100);
    --color-plate-muted:   var(--plate-300);
    --color-signal:        var(--sign-amber);
    --color-signal-led:    var(--led-good);

    /* Interactive sizing — WCAG 2.2 target minimum is 24px; we use 44px */
    --tap-min: 44px;

    /* Typography family — neutral grotesque, zero-dependency, offline,
       Cyrillic-safe (system stacks cover RU roadmap). */
    --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
                 Helvetica, Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Code", "Segoe UI Mono",
                 Menlo, Consolas, monospace;
    /* Display / signage role — self-hosted Overpass layered over the system stack
       (paints instantly, then swaps). Headings, airport codes, sign-plate labels. */
    --font-display: "Overpass", var(--font-sans);

    /* Icon sizing */
    --icon-sm: 1.25rem;
    --icon-md: 1.75rem;
    --icon-lg: 2.5rem;
  }

  /* ---- Dark theme: flip semantic aliases only; primitives stay fixed.
     (Verified manually in styleguide.html; light palette is the AA-tested default.) */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ink-dark-bg:    #0f141b;
      --ink-dark-surf:  #172230;

      --color-bg:            #0f141b;
      --color-surface:       #172230;
      --color-surface-sunken:#0b1017;

      --color-text:          #eef2f7;
      --color-text-strong:   #ffffff;
      --color-text-muted:    #adb8c6;

      --color-accent:        #6ea0ff;
      --color-accent-strong: #93b7ff;
      --color-accent-tint:   #1b2b45;
      --color-on-accent:     #0b1017;

      --color-warning:       #f2b45a;
      --color-warning-signal:#fbbf3f;
      --color-warning-tint:  #2c2211;

      --color-danger:        #f28b82;
      --color-danger-signal: #f2554b;
      --color-danger-tint:   #2c1615;

      --color-success:       #6ee7a0;
      --color-success-tint:  #12241a;
      --color-on-status:     #0b1017;

      --color-border:        #2b3644;
      --color-border-strong: #7c8797;
      --color-focus:         #6ea0ff;

      /* Board lifts slightly off the darker page so it still reads as a lit sign. */
      --color-plate:         #17233b;
      --color-plate-raised:  #1f2d49;
      --color-plate-line:    #34466a;
      --color-plate-ink:     #f1f5fb;
      --color-plate-muted:   #a9b6cc;
    }
  }

  /* Manual override hook: data-theme="dark" | "light" wins over the media query. */
  :root[data-theme="dark"] {
    --color-bg:#0f141b; --color-surface:#172230; --color-surface-sunken:#0b1017;
    --color-text:#eef2f7; --color-text-strong:#ffffff; --color-text-muted:#adb8c6;
    --color-accent:#6ea0ff; --color-accent-strong:#93b7ff; --color-accent-tint:#1b2b45; --color-on-accent:#0b1017;
    --color-warning:#f2b45a; --color-warning-signal:#fbbf3f; --color-warning-tint:#2c2211;
    --color-danger:#f28b82; --color-danger-signal:#f2554b; --color-danger-tint:#2c1615;
    --color-success:#6ee7a0; --color-success-tint:#12241a; --color-on-status:#0b1017;
    --color-border:#2b3644; --color-border-strong:#7c8797; --color-focus:#6ea0ff;
    --color-plate:#17233b; --color-plate-raised:#1f2d49; --color-plate-line:#34466a; --color-plate-ink:#f1f5fb; --color-plate-muted:#a9b6cc;
  }
}