/* Bayou Buccaneers — design tokens v1
   Dark "night game" system. Every screen uses only these variables.
   Breakpoints (media queries can't read vars): --bp-desktop 1000px, --bp-tablet 700px, --bp-min 400px. */

:root {
  /* ---- Surfaces: elevation low → high ---- */
  --color-surface-0: #0E100D;   /* backdrop behind the app / canvas */
  --color-surface-1: #141613;   /* "field" — app background */
  --color-surface-2: #1B1E19;   /* sunken wells: inputs, answer tiles, pads */
  --color-surface-3: #242821;   /* "panel" — cards, sidebars */
  --color-surface-4: #2E332A;   /* raised: tile on a panel, hover */
  --color-surface-5: #394035;   /* highest: pressed, modal header */
  --color-scrim: rgba(8, 9, 7, 0.80);

  /* ---- Lines ---- */
  --color-line: #3A3F34;
  --color-line-strong: #5A6150;   /* control borders (≥3:1 on surface-2) */

  /* ---- Text (all AA on surface-1…4) ---- */
  --color-text: #F4F2E9;          /* chalk — 15.9:1 on field */
  --color-text-muted: #B9B6A8;    /* 8.9:1 on field, 7.4:1 on panel */
  --color-text-faint: #8F8C80;    /* 5.2:1 on field — metadata only */

  /* ---- Brand + meaning ---- */
  --color-gold: #FDB827;          /* primary action, Buccaneers, tokens */
  --color-gold-hover: #FFC94D;
  --color-gold-edge: #A87508;     /* chunky 3D bottom edge of primary buttons */
  --color-gold-tint: #2F2815;     /* selected tile fill */
  --color-on-gold: #1A1505;       /* text on gold — 11.6:1 */

  --color-blue: #2E86C8;          /* info, "current", links on light use only */
  --color-blue-text: #7FC0F2;     /* blue as text on dark — 8.6:1 */
  --color-blue-tint: #152838;

  --color-green: #6FCB6B;         /* "right" / done — always paired with ✓ + word */
  --color-green-tint: #182E19;

  --color-red: #E4634F;           /* "wrong" / outs — always paired with ✗ + word */
  --color-red-text: #F28C7A;
  --color-red-tint: #331B16;

  --color-warn: #E8A33D;          /* coach, pending, heads-up */
  --color-warn-tint: #2F2413;

  --color-focus: #62B2F0;         /* focus ring — 7.2:1 on field, 3.4:1 next to gold */

  /* ---- Type ---- */
  --font-display: "Graduate", Georgia, serif;   /* headings, scoreboard, buttons */
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-label: 14px;     /* Graduate ALL-CAPS labels only (eyebrows, scoreboard) */
  --fs-small: 16px;     /* grown-up metadata only; never kid body copy */
  --fs-body: 18px;      /* minimum body size anywhere */
  --fs-body-lg: 20px;   /* default kid body, answer tiles */
  --fs-read: 22px;      /* story paragraphs */
  --fs-question: 28px;  /* the question prompt */
  --fs-h3: 24px;
  --fs-h2: 32px;
  --fs-h1: 44px;
  --fs-hero: 64px;      /* PLAY BALL, verdicts */
  --fs-score: 96px;     /* final score, token balance */
  --lh-tight: 1.1;
  --lh-body: 1.45;
  --lh-read: 1.7;
  --tracking-display: 0.04em;
  --tracking-label: 0.14em;
  --fw-regular: 400; --fw-semibold: 600; --fw-bold: 700;

  /* ---- Space (4px base) ---- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px;
  --space-9: 48px; --space-10: 64px; --space-11: 80px;

  /* ---- Sizes / targets ---- */
  --target-min: 48px;        /* smallest hit target anywhere */
  --target-kid: 64px;        /* kid-side buttons */
  --btn-primary-h: 80px;     /* SWING / PLAY BALL */
  --tile-h: 96px;            /* answer tile min height (all tiles equal) */
  --keycap: 40px;
  --page-max: 1440px;
  --read-max: 64ch;
  --col-atbat: 600px;        /* right column of the at-bat */
  --col-sidebar: 280px;      /* office nav, binder sets */
  --gutter: 32px;            /* 16px below 700px */

  /* ---- Radii ---- */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* ---- Shadows (dark UI: depth via darker shadow + faint top highlight) ---- */
  --shadow-1: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 6px rgba(0,0,0,0.35);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 28px rgba(0,0,0,0.45);
  --shadow-3: 0 28px 80px rgba(0,0,0,0.65);
  --edge-primary: 0 5px 0 var(--color-gold-edge);   /* game-button press edge */
  --edge-secondary: 0 5px 0 #0A0B09;

  /* ---- Focus ---- */
  --focus-width: 4px;
  --focus-offset: 3px;
  --focus-ring: var(--focus-width) solid var(--color-focus);

  /* ---- Motion ---- */
  --dur-instant: 80ms;   /* press */
  --dur-fast: 140ms;     /* hover, toggle */
  --dur-base: 220ms;     /* panels, tiles */
  --dur-slow: 420ms;     /* overlays, stamps */
  --dur-flip: 650ms;     /* card flip */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-pop: cubic-bezier(.2, 1.4, .4, 1);

  /* ---- Layers ---- */
  --z-sticky: 10; --z-overlay: 50; --z-call: 60;
}

@media (max-width: 699px) { :root { --gutter: 16px; --fs-question: 24px; --fs-hero: 44px; --fs-score: 72px; --btn-primary-h: 72px; --tile-h: 80px; } }

/* No flashing, no bouncing: motion collapses to instant cross-fades. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-flip: 1ms; --ease-pop: linear; }
  /* The template's blanket 1ms transition on every element is left out:
     it gave GSAP-driven parts (lib/motion.js, which honours reduced motion
     itself) a frame of lag, so the number line's marker was measured short
     of its pin (blocks-move.test). */
}