/* Gamestead design tokens — the single source of truth. Documented in docs/ui-system.md. */
:root {
  color-scheme: light;

  --bg: #F5F0E6;
  --surface: #FFFCF6;
  --sunken: #ECE4D4;
  --line: #DCD2BF;
  --ink: #1C2130;
  --ink-2: #575D6C;
  --on-ink: #FFFCF6;
  --board: #232A3D;
  --p1: #E8572E;
  --p1-deep: #C4431F;
  --p2: #2C6BD8;
  --p2-deep: #1F55B3;
  --p3: #2E9E6A;
  --p4: #8A5CD6;
  --p5: #D63E7D;
  --p6: #13808A;
  --gold: #F2B33D;
  --danger: #C2362B;
  --ok: #2F8F5B;
  --focus: #1C2130;
  --ring: #FFFCF6;

  /* Card hues (Hue Heist and future card games). Theme-independent: cards are printed objects. */
  --hue-ruby: #D93A3A;
  --hue-amber: #F08A24;
  --hue-lemon: #E8C21C;
  --hue-leaf: #3FA34D;
  --hue-ocean: #2E78D6;
  --hue-plum: #8B4FC9;
  --hue-rose: #E0569B;
  --card-back: #232A3D;

  /* Sea (Fleet Hunt and future naval/map games). Theme-independent: the sea is a printed object. */
  --sea: #1F5E86;
  --sea-deep: #184C6D;
  --sea-line: #2A6C93;
  --foam: #D7ECF5;
  --hull: #A3ADBC;
  --hull-deep: #5D6777;
  --blast: #F2643D;

  /* Chalk on slate (Morris and the other traditional games drawn on the floor). Theme-independent. */
  --slate: #2F3B3E;
  --slate-deep: #232D30;
  --chalk: #EFEBE2;
  --chalk-dim: #8E9A97;

  --font-display: "Baloo 2", ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 4vw, 2.25rem);
  --fs-2xl: clamp(2.25rem, 7vw, 3.5rem);

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 0 rgb(28 33 48 / 0.05), 0 6px 18px -10px rgb(28 33 48 / 0.28);
  --shadow-2: 0 2px 0 rgb(28 33 48 / 0.05), 0 22px 48px -18px rgb(28 33 48 / 0.45);
  --shadow-press: 0 3px 0 rgb(28 33 48 / 0.9);
  --shadow-press-soft: 0 3px 0 var(--line);

  --dur-1: 120ms;
  --dur-2: 220ms;
  --dur-3: 420ms;
  --dur-fade: 200ms; /* opacity-only changes (dimming); kept under reduced motion, which keeps fades */
  --ease-out: cubic-bezier(.33, 1, .68, 1); /* strong ease-out: arrivals, UI */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* things moving across the screen */
  --ease-in: cubic-bezier(.55, 0, 1, .45); /* gravity only: falling objects accelerate. Never for UI. */
  --ease-spring: cubic-bezier(.34, 1.3, .64, 1); /* small overshoot for settle and pop-ins */
  /* Game motion (platform/js/fx.js DUR mirrors these; Fast animations halves them) */
  --dur-flip: 480ms; /* motion tokens are the fx.js DUR values × PACE (1.4) */
  --dur-hold: 340ms;
  --dur-travel: 730ms;
  --dur-settle: 360ms;

  --gutter: 16px;
  --max: 1080px;
  --max-game: 640px;
  --tap: 44px;
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #12141B;
    --surface: #1B1F29;
    --sunken: #0D0F14;
    --line: #2B3140;
    --ink: #F1ECE2;
    --ink-2: #A9ADB8;
    --on-ink: #12141B;
    --board: #262D40;
    --p1: #FF7A4D;
    --p1-deep: #D9572B;
    --p2: #5B93F5;
    --p2-deep: #3A72D6;
    --p3: #4CC08A;
    --p4: #A988EA;
    --p5: #F06A9E;
    --p6: #3CC4BD;
    --gold: #F7C548;
    --danger: #F0695E;
    --ok: #4CC08A;
    --focus: #F7C548;
    --ring: #F1ECE2;
    --shadow-1: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 22px -12px rgb(0 0 0 / 0.7);
    --shadow-2: 0 2px 0 rgb(0 0 0 / 0.3), 0 24px 50px -18px rgb(0 0 0 / 0.85);
    --shadow-press: 0 3px 0 rgb(0 0 0 / 0.55);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12141B;
  --surface: #1B1F29;
  --sunken: #0D0F14;
  --line: #2B3140;
  --ink: #F1ECE2;
  --ink-2: #A9ADB8;
  --on-ink: #12141B;
  --board: #262D40;
  --p1: #FF7A4D;
  --p1-deep: #D9572B;
  --p2: #5B93F5;
  --p2-deep: #3A72D6;
  --p3: #4CC08A;
  --p4: #A988EA;
  --p5: #F06A9E;
  --p6: #3CC4BD;
  --gold: #F7C548;
  --danger: #F0695E;
  --ok: #4CC08A;
  --focus: #F7C548;
  --ring: #F1ECE2;
  --shadow-1: 0 1px 0 rgb(0 0 0 / 0.3), 0 8px 22px -12px rgb(0 0 0 / 0.7);
  --shadow-2: 0 2px 0 rgb(0 0 0 / 0.3), 0 24px 50px -18px rgb(0 0 0 / 0.85);
  --shadow-press: 0 3px 0 rgb(0 0 0 / 0.55);
}

/* "Fast animations" (rules dialog) halves every duration. */
:root[data-fast] {
  --dur-1: 60ms;
  --dur-2: 110ms;
  --dur-3: 210ms;
  --dur-flip: 240ms;
  --dur-hold: 170ms;
  --dur-travel: 365ms;
  --dur-settle: 180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root,
  :root[data-fast] {
    --dur-1: 0ms;
    --dur-2: 0ms;
    --dur-3: 0ms;
    --dur-flip: 0ms;
    --dur-hold: 0ms;
    --dur-travel: 0ms;
    --dur-settle: 0ms;
  }
}