/**
 * Design tokens — the single source of truth for colour, spacing, type, depth
 * and motion. Nothing downstream hardcodes a value; canvas rendering reads the
 * piece colours back out of here via getComputedStyle, so there is exactly one
 * place a colour is defined.
 */

:root {
  /* Surfaces — deep, slightly cool neutrals. The playfield is the hero, so
     everything around it stays quiet. */
  --bg-base:       oklch(0.14 0.012 265);
  --bg-elevated:   oklch(0.18 0.014 265);
  --slab-bg:       oklch(0.17 0.012 265 / 0.92);
  --surface-1:     oklch(0.21 0.014 265);
  --surface-2:     oklch(0.25 0.016 265);
  --border-subtle: oklch(0.30 0.014 265);
  --grid-line:     oklch(0.24 0.010 265);
  --well-bg:       oklch(0.115 0.010 265);

  /* Text — every tier clears 4.5:1 against --slab-bg. */
  --text-primary:   oklch(0.96 0.005 265);
  --text-secondary: oklch(0.78 0.010 265);
  --text-muted:     oklch(0.64 0.012 265);

  /* Pieces — guideline hues softened for a dark UI. The spec's pure primaries
     (#00f0f0, #f00000 …) vibrate badly against near-black; these keep the same
     hue identity at a saturation that reads calmly. Exact spec values live in
     the [data-palette="classic"] block below. */
  --piece-i: #22d3ee;
  --piece-o: #facc15;
  --piece-t: #a855f7;
  --piece-s: #4ade80;
  --piece-z: #f43f5e;
  --piece-j: #3b82f6;
  --piece-l: #fb923c;

  --ghost-fill-alpha:   0.10;
  --ghost-stroke-alpha: 0.55;
  --block-radius:       0.12;  /* fraction of cell size */

  /* Accents */
  --accent:        oklch(0.72 0.15 250);
  --accent-strong: oklch(0.80 0.17 250);
  --focus-ring:    oklch(0.85 0.16 230);
  --danger:        oklch(0.65 0.20 25);
  --success:       oklch(0.75 0.16 150);

  /* Spacing — 4px base. */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-8: 3rem;
  --sp-10: 4rem;

  /* Type — fluid, 1.25 ratio. Numerals get a mono face so score digits do not
     reflow as they change. */
  --font-ui:  system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-num: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;

  --fs-xs:   clamp(0.69rem, 0.66rem + 0.15vw, 0.75rem);
  --fs-sm:   clamp(0.81rem, 0.78rem + 0.18vw, 0.875rem);
  --fs-base: clamp(0.94rem, 0.90rem + 0.22vw, 1rem);
  --fs-lg:   clamp(1.13rem, 1.05rem + 0.35vw, 1.25rem);
  --fs-xl:   clamp(1.38rem, 1.22rem + 0.60vw, 1.75rem);
  --fs-2xl:  clamp(1.88rem, 1.55rem + 1.40vw, 2.75rem);
  --fs-3xl:  clamp(2.50rem, 1.90rem + 2.60vw, 4rem);

  --lh-tight: 1.15;
  --lh-base:  1.5;
  --tracking-wide: 0.08em;

  /* Radius and elevation — soft shadows only, no hard bevels. */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30);
  --shadow-2: 0 4px 12px oklch(0 0 0 / 0.35);
  --shadow-3: 0 12px 32px oklch(0 0 0 / 0.45);
  --shadow-glow: 0 0 28px oklch(0.72 0.15 250 / 0.18);

  /* Motion */
  --dur-fast:    120ms;
  --dur-base:    220ms;
  --dur-slow:    400ms;
  --dur-bg-fade: 800ms;
  --dur-clear:   300ms;
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout — --cell-size is written by JS after the device-pixel snap. */
  --cell-size:    30px;
  --panel-w:      clamp(8rem, 14vw, 12rem);
  /* Backdrop opacity. Combines multiplicatively with the scrim alpha in
     backgrounds.css — see the scrim budget note there before lowering this. */
  --bg-intensity: 0.9;
}

/* Exact spec §3 palette, behind a setting for players who want the classic look. */
:root[data-palette="classic"] {
  --piece-i: #00f0f0;
  --piece-o: #f0f000;
  --piece-t: #a000f0;
  --piece-s: #00f000;
  --piece-z: #f00000;
  --piece-j: #0000f0;
  --piece-l: #f0a000;
}

/* Reduced motion — the OS preference and the in-app toggle share one mechanism
   so they can never disagree. Zeroing the duration tokens disables every
   transition and animation at the source rather than per-rule. */
@media (prefers-reduced-motion: reduce) {
  :root[data-motion="auto"] {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-bg-fade: 0ms;
    --dur-clear: 60ms;
  }
}

:root[data-motion="off"] {
  --dur-fast: 0ms;
  --dur-base: 0ms;
  --dur-slow: 0ms;
  --dur-bg-fade: 0ms;
  --dur-clear: 60ms;
}