/*
Token families: elevation (--elevation-*), motion durations
(--motion-*), easings (--ease-* including --ease-pop), text sizes
(--text-* including --text-2xs), overlay/shadow/highlight colors, and status
colors including --danger. Existing semantic tokens keep their names so this
refactor changes no computed values.
*/
:root {
  color-scheme: light;
  /* Menu and cargo colors match the native Nocturne theme. */
  --background: #f5f1e8; --surface: #fffcf6; --elevated: #e9e3d7;
  --ink: #203b3d; --muted: #536961; --accent: #885226; --on-accent: #fffaf0;
  --sea: #256f66; --line: #d0c7b7; --error: #ad2538; --ring: var(--sea);
  --success: #1e6e3c; --warning: #7a5200;
  --scene-day: block; --scene-night: none; --water-daylight: 100%; --ripple-strength: .22;
  --game-background: #070c18; --game-lift: #101b31; --game-card: #152744;
  --game-ink: #f2f6ff; --game-muted: #8fa3c8; --game-accent: #53e0c0; --game-on-accent: #06231c;
  --board: #121d33; --cell: #1a2842; --cell-edge: #243557; --board-ink: var(--game-ink);
  --red: #ff5d6c; --blue: #4c8dff; --yellow: #ffc53d;
  --green: #3dd68c; --purple: #b073ff; --orange: #ff9448;
  --lagoon: #49dacb; --aurora: #bc9cff; --sunset: #ffae7a;
  --scene-accent: var(--game-accent); --grade-strength: .45;
  --shine: #fff; --piece-shade: #0a1020; --coin-face: #f5c542; --coin-edge: #6b4300; --coin-rim: #8a5a00;
  --piece-symbol: var(--piece-shade); --piece-symbol-edge: #ffffff40;
  --piece-mark-size: 32; --piece-mark-inset: 14px;
  --piece-rim: 2; --piece-focus: 4; --piece-bloom: .3; --gate-width: 12;
  --piece-depth: #060b16; --well-floor: #10192c;
  --frame-highlight: #8fa3c830; --frame-shadow: #02061180;
  --glass-bright: #ffffff70; --glass-soft: #ffffff12; --glass-dark: #070c1866;
  --fx-budget: 96; --fx-burst-count: 24; --fx-clear-count: 64; --fx-dpr: 2;
  --fx-spark-size: 48; --fx-ring-size: 155; --fx-flare-size: 240; --fx-glow: 12;
  --fx-travel: 150; --fx-scatter: 170; --fx-bevel: 7;
  --fx-burst: 700ms; --fx-celebrate: 1200ms;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  --text-2xs: .6875rem; --text-xs: .75rem; --text-sm: .875rem; --text-md: 1rem; --text-lg: 1.125rem;
  --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: clamp(2rem, 4vw, 3.25rem);
  --leading: 1.55; --leading-title: 1.08; --tracking-title: -.035em; --tracking-label: .1em;
  --weight-body: 400; --weight-label: 600; --weight-title: 700;
  --s1: .25rem; --s2: .5rem; --s3: .75rem; --s4: 1rem; --s6: 1.5rem;
  --s8: 2rem; --s12: 3rem; --s16: 4rem;
  --radius-sm: 1rem; --radius: 1.125rem; --radius-lg: 1.5rem; --pill: 999px;
  --container: 72rem; --game-width: 40rem; --board-size: 29rem; --control: 2.875rem;
  --board-min-size: 16rem; --game-chrome: 26rem; --game-chrome-mobile: 30rem;
  --menu-control: 3.25rem; --icon-size: 1.25rem; --icon-stroke: 1.75;
  --overlay-scrim: rgb(0 0 0 / .4); --overlay-scrim-soft: rgb(0 0 0 / .35);
  --shadow-color: #070c181c; --shadow-deep: #02061180; --highlight-soft: #ffffff12; --highlight-bright: #ffffff70;
  --danger: var(--error);
  --shadow: 0 .75rem 2.5rem var(--shadow-color);
  --elevation-1: var(--shadow); --elevation-2: var(--shadow), 0 1px 0 var(--line); --elevation-board: var(--board-shadow);
  --board-shadow: 0 0 4rem color-mix(in srgb, var(--scene-accent) 12%, transparent);
  --fast: 150ms; --normal: 250ms; --slow: 400ms;
  --motion-fast: var(--fast); --motion-normal: var(--normal); --motion-slow: var(--slow);
  --ease: cubic-bezier(.2, 0, 0, 1); --ease-enter: cubic-bezier(.05, .7, .1, 1);
  --ease-move: cubic-bezier(.4, 0, .2, 1); --ease-pop: cubic-bezier(.34, 1.45, .64, 1);
}
:root[data-appearance="dark"] {
  color-scheme: dark;
  --background: #0b1b2b; --surface: #152e41; --elevated: #203d51;
  --ink: #f8f3e9; --muted: #afc7ce; --accent: #ebc18b; --on-accent: #182c39;
  --sea: #61d6c6; --line: #345468; --error: #ff9a9e; --success: #7fdc9f; --warning: #f2c35b;
  --scene-day: none; --scene-night: block; --water-daylight: 38%; --ripple-strength: .12;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-appearance="light"]) {
    color-scheme: dark;
    --background: #0b1b2b; --surface: #152e41; --elevated: #203d51;
    --ink: #f8f3e9; --muted: #afc7ce; --accent: #ebc18b; --on-accent: #182c39;
    --sea: #61d6c6; --line: #345468; --error: #ff9a9e; --success: #7fdc9f; --warning: #f2c35b;
    --scene-day: none; --scene-night: block; --water-daylight: 38%; --ripple-strength: .12;
  }
}
body:has(.play-layout) {
  color-scheme: dark;
  --background: var(--game-background); --surface: var(--game-card); --elevated: var(--cell);
  --ink: var(--game-ink); --muted: var(--game-muted); --line: var(--cell-edge);
  --accent: var(--game-accent); --on-accent: var(--game-on-accent);
  --sea: var(--game-accent); --ring: var(--game-accent); --error: #ff9a9e; --success: #7fdc9f; --warning: #f2c35b;
}
/* Tidegrid by day: the harbor in daylight, using the menu's cream and teal. The night palette above
   is the default, so a dark device or the moon switch keeps the original look. */
html[data-scene="day"] body:has(.play-layout) {
  color-scheme: light;
  --game-background: #eef1ec; --game-lift: #dceae6; --game-card: #fffcf6;
  --game-ink: #203b3d; --game-muted: #536961; --game-accent: #1a7366; --game-on-accent: #fffaf0;
  --board: #dde6e6; --cell: #edf2f1; --cell-edge: #c3d1d0;
  --piece-depth: #7f949a; --well-floor: #d0dbdb; --piece-bloom: .15; --grade-strength: .2;
  --edge-tint: 55%; --edge-alpha: 1; --edge-base: var(--piece-shade); --piece-rim: 7;
  --frame-highlight: #ffffffb3; --frame-shadow: #31505a22;
  --glass-dark: #203b3d22; --error: #ad2538; --success: #1e6e3c; --warning: #7a5200;
}