/* fiddlefinger design tokens. Source of truth: BRAND.md.
   Theme: follows prefers-color-scheme; override with <html data-theme="light|dark">.
   Per game: <html data-game="snug|popsheet|tend|uptick|plonk|strum|gloop"> sets --game, --game-ink, --game-text.
   Contrast for every text pair is checked by `node tools/contrast.mjs` (table in BRAND.md). */

:root {
  color-scheme: light;

  /* ---- ground and surfaces (light) ---- */
  --bg: #D5E1EA;            /* slate-blue ground */
  --panel: #C3D2DE;         /* chips, segmented controls, secondary buttons */
  --panel-edge: #A3B6C6;    /* bevel under panel buttons */
  --surface: #F3F7FA;       /* cards, sheets */
  --surface-edge: #CBD7E1;  /* bevel under cards */
  --line: #B4C4D2;          /* dividers (decorative only) */

  /* ---- text ---- */
  --ink: #172034;
  --muted: #44516A;

  /* ---- the play tray (navy in both themes) ---- */
  --board: #26304A;
  --board-ink: #E7ECF4;
  --board-muted: #AEB9CE;
  --slot: #34406A;
  --slot-edge: #1C2338;

  /* ---- brand accent: marigold (fills, primary buttons) ---- */
  --accent: #F0A92E;
  --accent-edge: #B87D16;   /* bevel under marigold buttons */
  --accent-ink: #2B1B00;    /* text on marigold */
  --accent-text: #825914;   /* marigold-family colour when used AS text on bg/surface */

  /* ---- states ---- */
  --link: #2A4FA0;
  --focus: #172034;         /* focus ring colour (3px) */
  --good: #17633F;
  --bad: #A3221B;

  /* ---- overlays and depth ---- */
  --scrim: rgba(213, 225, 234, .82);
  --shadow-rgb: 10, 20, 40;
  --highlight: rgba(255, 255, 255, .34);   /* the toy-block highlight pill */
  --shadow-card: 0 14px 44px rgba(var(--shadow-rgb), .24);
  --shadow-lift: 0 6px 18px rgba(var(--shadow-rgb), .18);

  /* ---- toy-block palette (shared by every game's pieces) ---- */
  --block-1: #E8543F;  /* tomato */
  --block-2: #F3A833;  /* marigold */
  --block-3: #3DB57E;  /* leaf */
  --block-4: #2E8FD8;  /* toy blue */
  --block-5: #8160DA;  /* plum */
  --block-6: #EA6FAA;  /* bubblegum */
  --block-7: #25B6B9;  /* lagoon */
  --block-edge-mix: .30;   /* bevel band = block colour darkened 30% toward black */

  /* ---- per-game accents: fill / ink-on-fill / text-on-ground ---- */
  --g-snug: #2E8FD8;     --g-snug-ink: #172034;     --g-snug-text: #1F5A8B;
  --g-popsheet: #EA6FAA; --g-popsheet-ink: #172034; --g-popsheet-text: #8A3767;
  --g-tend: #3DB57E;     --g-tend-ink: #172034;     --g-tend-text: #20614A;
  --g-uptick: #EE5A52;   --g-uptick-ink: #172034;   --g-uptick-text: #9A3330;
  --g-plonk: #8DBF2E;    --g-plonk-ink: #172034;    --g-plonk-text: #445D26;
  --g-strum: #7C5CD6;    --g-strum-ink: #FFFFFF;    --g-strum-text: #5A43A4;
  --g-gloop: #25B6B9;    --g-gloop-ink: #172034;    --g-gloop-text: #176069;

  /* default when no data-game is set (site pages) */
  --game: var(--accent); --game-ink: var(--accent-ink); --game-text: var(--accent-text);

  /* ---- type ---- */
  --font-display: "Lilita One", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --text-sm: 14px;     /* floor: nothing smaller, anywhere */
  --text-md: 16px;     /* body, buttons */
  --text-lg: 18px;     /* sheet body on desktop, lead paragraphs */
  --text-xl: 20px;     /* sheet titles in Figtree */
  --display-sm: 24px;  /* best score, small numbers */
  --display-md: 32px;  /* game name in header, card titles */
  --display-lg: 42px;  /* live score */
  --display-xl: 60px;  /* score on the game-over card */
  --display-2xl: 72px; /* home hero (desktop) */
  --lh-tight: 1;
  --lh-snug: 1.25;
  --lh-body: 1.5;
  --weight-body: 500;
  --weight-strong: 700;
  --weight-heavy: 800;
  --label-tracking: .08em;

  /* ---- spacing (4 px base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* page side gutter on phones */
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --tap: 48px;       /* standard tap target; never below 44px */
  --tap-min: 44px;
  --page-max: 520px; /* game column */
  --site-max: 1080px;/* site pages */

  /* ---- radii ---- */
  --r-sm: 8px;
  --r-md: 14px;      /* buttons */
  --r-lg: 22px;      /* cards, sheets */
  --r-tray: 16px;    /* play tray outer corner (or 34% of a cell on canvas) */
  --r-pill: 999px;
  --block-radius: .24;  /* ratio of block size, canvas */

  /* ---- bevels ---- */
  --bevel: 4px;        /* resting depth of a toy button */
  --bevel-press: 1px;  /* depth while pressed */
  --bevel-card: 6px;

  /* ---- motion ---- */
  --dur-press: 90ms;
  --dur-ui: 180ms;
  --dur-pop: 260ms;
  --dur-sheet: 320ms;
  --dur-celebrate: 900ms;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-back: cubic-bezier(.34, 1.56, .64, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --motion: 1;         /* multiply movement distances by this in JS/CSS */
}

/* ---- dark: follow the OS unless the page forces light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0E131E;
    --panel: #1A2233;
    --panel-edge: #0A0E17;
    --surface: #222B40;
    --surface-edge: #141A28;
    --line: #2E3850;
    --ink: #E7ECF4;
    --muted: #95A2BA;
    --board: #19213A;
    --board-ink: #E7ECF4;
    --board-muted: #A3AFC6;
    --slot: #263155;
    --slot-edge: #10162A;
    --accent: #F4B544;
    --accent-edge: #B07C1C;
    --accent-ink: #2B1B00;
    --accent-text: #F4B544;
    --link: #F4B544;
    --focus: #F4B544;
    --good: #5FD39A;
    --bad: #FF8A80;
    --scrim: rgba(14, 19, 30, .84);
    --shadow-rgb: 0, 0, 0;
    --highlight: rgba(255, 255, 255, .30);
    --shadow-card: 0 14px 44px rgba(var(--shadow-rgb), .5);
    --shadow-lift: 0 6px 18px rgba(var(--shadow-rgb), .4);
    --g-snug-text: #4A9FDF;
    --g-popsheet-text: #EA6FAA;
    --g-tend-text: #3DB57E;
    --g-uptick-text: #F2716A;
    --g-plonk-text: #8DBF2E;
    --g-strum-text: #A58DE6;
    --g-gloop-text: #25B6B9;
  }
}

/* ---- dark: forced ---- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0E131E;
  --panel: #1A2233;
  --panel-edge: #0A0E17;
  --surface: #222B40;
  --surface-edge: #141A28;
  --line: #2E3850;
  --ink: #E7ECF4;
  --muted: #95A2BA;
  --board: #19213A;
  --board-ink: #E7ECF4;
  --board-muted: #A3AFC6;
  --slot: #263155;
  --slot-edge: #10162A;
  --accent: #F4B544;
  --accent-edge: #B07C1C;
  --accent-ink: #2B1B00;
  --accent-text: #F4B544;
  --link: #F4B544;
  --focus: #F4B544;
  --good: #5FD39A;
  --bad: #FF8A80;
  --scrim: rgba(14, 19, 30, .84);
  --shadow-rgb: 0, 0, 0;
  --highlight: rgba(255, 255, 255, .30);
  --shadow-card: 0 14px 44px rgba(var(--shadow-rgb), .5);
  --shadow-lift: 0 6px 18px rgba(var(--shadow-rgb), .4);
  --g-snug-text: #4A9FDF;
  --g-popsheet-text: #EA6FAA;
  --g-tend-text: #3DB57E;
  --g-uptick-text: #F2716A;
  --g-plonk-text: #8DBF2E;
  --g-strum-text: #A58DE6;
  --g-gloop-text: #25B6B9;
}

/* ---- per-game accent hook ---- */
[data-game="snug"]     { --game: var(--g-snug);     --game-ink: var(--g-snug-ink);     --game-text: var(--g-snug-text); }
[data-game="popsheet"] { --game: var(--g-popsheet); --game-ink: var(--g-popsheet-ink); --game-text: var(--g-popsheet-text); }
[data-game="tend"]     { --game: var(--g-tend);     --game-ink: var(--g-tend-ink);     --game-text: var(--g-tend-text); }
[data-game="uptick"]   { --game: var(--g-uptick);   --game-ink: var(--g-uptick-ink);   --game-text: var(--g-uptick-text); }
[data-game="plonk"]    { --game: var(--g-plonk);    --game-ink: var(--g-plonk-ink);    --game-text: var(--g-plonk-text); }
[data-game="strum"]    { --game: var(--g-strum);    --game-ink: var(--g-strum-ink);    --game-text: var(--g-strum-text); }
[data-game="gloop"]    { --game: var(--g-gloop);    --game-ink: var(--g-gloop-ink);    --game-text: var(--g-gloop-text); }

/* ---- reduced motion: no travel, no bounce, short fades ---- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion: 0;
    --dur-press: 1ms;
    --dur-ui: 1ms;
    --dur-pop: 1ms;
    --dur-sheet: 120ms;   /* sheets fade, they don't slide */
    --dur-celebrate: 600ms;
    --ease-back: var(--ease-out);
  }
}