/* Design tokens — from the approved mockup A · Wayfinding
 * (<kit>/mockups/airplaycasino.nl/a-wayfinding.html, approved 2026-09-28).
 *
 * Rules:
 *   · names say the role (--color-surface), never the value;
 *   · the mockup's values moved here as they are;
 *   · what the mockup does not define (states, focus, errors, layers, motion scale) is marked "added".
 */
:root {
  /* ── Colour: from the mockup ─────────────────────────────────────────── */
  --color-bg: #0F1216;            /* terminal black */
  --color-rail: #08090B;          /* side rail, dock */
  --color-surface: #181C22;
  --color-surface-2: #222831;
  --color-border: #2E3540;
  --color-text: #F4F2EC;          /* bone */
  --color-text-2: #B9BEC6;
  --color-muted: #9AA1AB;         /* mockup #848B96 lifted to 4.5:1 on --color-surface (added: a11y) */
  --color-brand: #FFC928;         /* signal yellow — navigation, primary action */
  --color-brand-ink: #111418;     /* text on yellow */
  --color-go: #3FBF7F;            /* ok / active status */
  --color-alert: #FF5A36;

  /* ── Colour: added (not in the mockup) ───────────────────────────────── */
  --color-brand-hover: #FFD95C;                /* mockup's .btn--sign:hover */
  --color-brand-active: color-mix(in srgb, var(--color-brand) 85%, black);
  --color-sign-hover: #FFD34D;                 /* mockup's .sign:hover */
  --color-surface-hover: #2A313B;
  --color-error: #FF7A5C;                      /* readable on --color-bg / --color-surface */
  --color-success: var(--color-go);
  --color-warn: #FFC928;
  --focus-ring: 0 0 0 3px var(--color-brand);
  --scrim: rgb(5 6 8 / .72);

  /* ── Typography: from the mockup ─────────────────────────────────────── */
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Archivo", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --fs-h1: clamp(44px, 7.4vw, 112px);
  --fs-h1-page: clamp(36px, 5.2vw, 76px);    /* added: inner pages, same face and stretch */
  --fs-h2: clamp(26px, 3.2vw, 40px);
  --fs-h3: 20px;
  --fs-sign: clamp(26px, 3vw, 44px);
  --fs-lead: clamp(18px, 1.6vw, 22px);
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-xs: 12px;
  --stretch-display: 72%;
  --stretch-h2: 80%;
  --stretch-card: 90%;
  --lh-tight: .86;
  --lh-head: 1.05;
  --lh-base: 1.55;

  /* ── Space, shape, depth ─────────────────────────────────────────────── */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-44: 44px;
  --space-56: 56px;
  --space-64: 64px;
  --radius: 4px;                  /* the mockup's only radius */
  --radius-sm: 2px;               /* code badges */
  --radius-pill: 999px;           /* added: 18+ roundel only */
  --shadow-card: 0 18px 40px -24px rgb(0 0 0 / .8);   /* added: lifted card */

  /* ── Layout: from the mockup ─────────────────────────────────────────── */
  --rail-w: 96px;
  --strip-h: 64px;
  --page-pad: 32px;               /* section side padding at desktop */
  --container: 1344px;            /* 1440 − rail 96 */
  --container-pad: var(--page-pad);
  --read: 72ch;                   /* added: legal / long text measure */

  /* ── Motion ──────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(.2, .7, .2, 1);        /* from the mockup */
  --ease-in: cubic-bezier(.5, 0, .8, .3);     /* added */
  --dur-fast: 140ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;

  /* ── Layers (added) ──────────────────────────────────────────────────── */
  --z-strip: 10;
  --z-rail: 20;
  --z-dock: 30;
  --z-header: 40;
  --z-overlay: 900;
  --z-modal: 1000;
  --z-gate: 1100;
}

/* Breakpoints (constants — media queries cannot read custom properties):
   --bp-mobile 390 · 520 (small phone tweaks) · 900 (rail → strip + dock) · 1200 (sign description hides) · 1440 desktop.
   Keep in step with kit.config.json → breakpoints. */