/* ===========================================================================
   FUSE design tokens
   ---------------------------------------------------------------------------
   This file names the system style.css already has. It invents almost nothing:
   every value below is either lifted verbatim from style.css or is the clean
   step of a scale that style.css hits by hand. Adopting it should be a pure
   rename, not a redesign.

   Load it before style.css:
       <link rel="stylesheet" href="./tokens.css">
       <link rel="stylesheet" href="./style.css">

   Dark only. The game is a lit board in a dark room; a light variant would be a
   different product, and a bad one is worse than none, so there is no
   prefers-color-scheme block.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* --- Colour: surfaces ------------------------------------------------- */
  --color-ground: #0b100d;              /* the page behind everything */
  --color-ground-glow-top: #43663b13;   /* radial wash, 50% 25% */
  --color-ground-glow-bottom: #25493316;/* radial wash, 50% 100% */
  --color-surface: #141d17;             /* cards, dialog base */
  --color-surface-raised: #1b261e;      /* dialog top of gradient */
  --color-surface-sunken: #0c140ec9;    /* input wells */
  --color-overlay: #111b15ef;           /* board overlays, top of gradient */
  --color-scrim: #050b08c9;             /* dialog backdrop */

  /* The board well. Three stops plus a rim: the arena reads as recessed. */
  --color-well-top: #141e17;
  --color-well-mid: #111a14;
  --color-well-bottom: #152019;
  --color-well-rim: #bddda348;

  /* --- Colour: lines ---------------------------------------------------- */
  --color-line: #ffffff12;
  --color-line-strong: #d8efc22b;
  --color-line-accent: #d8fa7742;

  /* --- Colour: ink ------------------------------------------------------ */
  --color-ink: #f1f4eb;                 /* primary text */
  --color-ink-muted: #9aa89b;           /* eyebrows, captions */
  --color-ink-quiet: #768579;           /* 4.94:1 on ground; do not put it on a surface (4.44:1) */
  --color-ink-dim: #8b9b88;             /* hints below the board */

  /* --- Colour: roles ---------------------------------------------------- */
  --color-accent: #d8fa77;              /* lime. score, chain, progress, focus */
  --color-accent-ink: #253319;          /* on --color-accent: 11.40:1 */
  --color-accent-soft: #d8fa770a;       /* accent at rest, as a fill */
  --color-accent-glow: #d8fa7740;       /* accent as a shadow */
  --color-accent-top: #dffa85;          /* primary button gradient, top */
  --color-accent-bottom: #d3f373;       /* primary button gradient, bottom */
  --color-accent-shade: #738746;        /* the 3px lip under a primary button */

  --color-danger: #e6a187;              /* the danger rim on the board */
  --color-danger-bright: #ff9d7a;       /* stage 3 */
  --color-danger-ink: #ffcbb8;          /* on --color-surface: 11.90:1 */
  --color-danger-surface: #241d18de;

  --color-success: #72e5b0;             /* tier 256's mint, promoted to a role */
  --color-success-ink: #1f5945;         /* on --color-success: 5.3:1 */
  --color-success-soft: #72e5b012;

  /* --- Colour: orb tiers ------------------------------------------------ */
  /* Index 0-8 = value 2-512, matching engine.mjs COLORS/INKS and the .orb-N
     classes. These are the `aurora` skin in skins.mjs; a skin swap rewrites
     these nine pairs and nothing else. Every ink clears 4.5:1 on its own orb. */
  --orb-0: #a4e5de;  --orb-ink-0: #254c49;   /* 2    6.72:1 */
  --orb-1: #abaeff;  --orb-ink-1: #373453;   /* 4    5.75:1 */
  --orb-2: #edb5ef;  --orb-ink-2: #633966;   /* 8    5.40:1 */
  --orb-3: #ffb4b7;  --orb-ink-3: #713e46;   /* 16   5.03:1 */
  --orb-4: #ffc28f;  --orb-ink-4: #714826;   /* 32   5.03:1 */
  --orb-5: #f8de82;  --orb-ink-5: #6c591d;   /* 64   5.11:1 */
  --orb-6: #d8fa77;  --orb-ink-6: #465c19;   /* 128  6.37:1 */
  --orb-7: #72e5b0;  --orb-ink-7: #1f5945;   /* 256  5.27:1 */
  --orb-8: #f3ffd6;  --orb-ink-8: #405b17;   /* 512  7.37:1 */

  /* Highlight and shade an orb material is built from, skin-independent. */
  --orb-specular: #ffffff8c;
  --orb-rim: #ffffff26;
  --orb-shade: #162a2421;

  /* --- Type ------------------------------------------------------------- */
  --font-display: 'Outfit', system-ui, sans-serif;   /* numbers, headings, brand */
  --font-body: 'DM Sans', system-ui, sans-serif;     /* everything you read */

  --weight-regular: 400;
  --weight-medium: 500;    /* the display weight for big numbers */
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;     /* the brand only */

  /* One scale. Breakpoint and clamp() variants stay in style.css. */
  --text-2xs: 12px;   /* eyebrow, caption, footnote, keycap */
  --text-xs: 14px;    /* coach copy, field label */
  --text-sm: 16px;    /* body — the floor for anything an input accepts */
  --text-md: 18px;
  --text-lg: 22px;    /* primary button label */
  --text-xl: 26px;    /* chain counter */
  --text-2xl: 32px;
  --text-3xl: 40px;   /* brand */
  --text-4xl: 52px;   /* the goal number */
  --text-5xl: 64px;   /* live score */
  --text-6xl: 80px;   /* start screen headline */

  --leading-none: 1;
  --leading-tight: 1.12;    /* stacked display lines */
  --leading-snug: 1.4;
  --leading-normal: 1.5;    /* body */
  --leading-relaxed: 1.65;  /* long paragraphs and help copy */

  --tracking-brand: -.06em;
  --tracking-tighter: -.055em;  /* display numerals and headlines */
  --tracking-tight: -.04em;
  --tracking-snug: -.03em;
  --tracking-normal: 0;
  --tracking-wide: .07em;       /* board labels */
  --tracking-wider: .13em;      /* eyebrows */
  --tracking-widest: .17em;     /* the edition line */

  /* --- Space ------------------------------------------------------------ */
  /* 4px base. style.css also uses optical in-betweens (9, 13, 25, 44); those
     are deliberate and stay literal rather than being forced onto the scale. */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-gutter: 48px;          /* .app padding-inline, desktop */
  --space-gutter-tight: 18px;    /* .app padding-inline, <=580px */
  --space-rail-gap: 44px;        /* game-layout column gap */

  /* --- Radius ----------------------------------------------------------- */
  --radius-xs: 4px;     /* keycap */
  --radius-sm: 10px;    /* input, small pill button */
  --radius-md: 12px;    /* primary and secondary buttons */
  --radius-lg: 16px;    /* coach card */
  --radius-xl: 22px;    /* board well, top corners */
  --radius-2xl: 24px;   /* dialog */
  --radius-well: 22px 22px 34px 34px;  /* the board: a bowl, not a box */
  --radius-full: 50%;

  /* --- Size ------------------------------------------------------------- */
  --size-touch: 44px;   /* minimum tap target; the icon buttons are exactly this */
  --size-icon: 22px;    /* default inline icon */
  --size-icon-sm: 18px; /* icon inside a button with a label */
  --topbar-height: 88px;
  --board-ratio: 420 / 520;   /* the engine's coordinate system, not a choice */

  /* --- Border width ----------------------------------------------------- */
  --stroke-hairline: 1px;
  --stroke-icon: 1.65;  /* unitless: SVG stroke-width at a 24px viewBox */
  --stroke-icon-bold: 2;

  /* --- Elevation -------------------------------------------------------- */
  --elevation-inset: inset 0 1px 0 #ffffff04;
  --elevation-orb:
    inset 0 1px 1px #ffffff57,
    inset 0 -3px 3px var(--orb-shade),
    0 5px 12px #00000025;
  --elevation-button:
    inset 0 1px 0 #f5ffd47a,
    0 3px 0 var(--color-accent-shade),
    0 7px 22px #0000002e;
  --elevation-button-pressed:
    inset 0 1px 0 #f5ffd47a,
    0 1px 0 var(--color-accent-shade),
    0 4px 12px #00000025;
  --elevation-card: 0 12px 34px #00000066, inset 0 1px 0 #eaffc112;
  --elevation-board:
    0 22px 64px #00000070,
    0 0 0 5px #0d140fe6,
    0 0 0 6px #c6eba30b,
    0 0 75px #a3e46906;
  --elevation-dialog: 0 32px 100px #00000085, inset 0 1px 0 #edffe30a;

  --blur-overlay: 5px;
  --blur-scrim: 8px;
  --blur-card: 4px;

  /* --- Layers ----------------------------------------------------------- */
  --layer-canvas: 1;
  --layer-well-sheen: 2;
  --layer-fx: 3;      /* board toast, danger message */
  --layer-coach: 4;
  --layer-overlay: 5; /* start, pause, results */
  --layer-well-edge: 6;

  /* --- Motion ----------------------------------------------------------- */
  --duration-instant: 80ms;  /* the chain meter draining: must not lag input */
  --duration-fast: 160ms;    /* button press */
  --duration-snap: 180ms;    /* hover, colour and border changes */
  --duration-base: 220ms;    /* orb transforms */
  --duration-slow: 350ms;    /* the board frame changing state */
  --duration-slower: 450ms;  /* progress fills, the supernova shake */
  --duration-gain: 700ms;    /* +points floating away */
  --duration-toast: 1700ms;  /* a board toast, start to finish */
  --duration-danger-pulse: 620ms;

  --ease-linear: linear;
  --ease-out: ease-out;          /* things arriving */
  --ease-in-out: ease-in-out;    /* things breathing in place */
  --ease-settle: cubic-bezier(.2, .8, .3, 1);   /* the shake: fast out, soft stop */
  --ease-pop: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot: a merge, an unlock */

  /* Motion specs for the phase 2 moments, as tokens rather than prose.
     Unlock badge:  transform scale .7 -> 1, opacity 0 -> 1,
                    var(--duration-base) var(--ease-pop), 60ms stagger per badge.
     Skin swap:     cross-fade the board over var(--duration-slow) var(--ease-out).
     Streak flame:  a 2-keyframe scale 1 -> 1.06 loop at
                    var(--duration-danger-pulse) var(--ease-in-out) alternate. */
}

/* Tokens stay honest when the player has asked for stillness. style.css also
   blanket-disables animation; this makes the token layer correct on its own. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast: 1ms;
    --duration-snap: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
    --duration-gain: 1ms;
    --duration-toast: 1ms;
    --duration-danger-pulse: 1ms;
  }
}