/*
 * Design tokens of the TTC Sukarti design system (https://claude.ai/artifact/CvyZEmhCo4aNKi9p5gxWFm),
 * transcribed from its tokens.json. Change values there first, then here; do not add tokens in this file.
 *
 * Two themes, switched by data-theme="light|dark" on <html> (set by the head script in layout.hbs and the
 * theme switch, see js/theme.js). Without that attribute, for example with JavaScript turned off, the page
 * follows the device setting. The dark values are therefore listed twice; keep both blocks identical.
 */

:root {
  color-scheme: light;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --blue-soft: #eaf0f9;
  --line: #dde4ef;
  --line-strong: #77849e;
  --ink: #0e1830;
  --ink-muted: #4b5772;
  --club-blue: #45659e;
  --club-blue-hover: #34507f;
  --on-blue: #ffffff;
  --navy: #1c2e55;
  --on-navy: #ffffff;
  --on-navy-muted: #b9c8e8;
  --band: #45659e;
  --on-band: #ffffff;
  --on-band-muted: #e3eaf6;
  --band-accent: #e3eaf6;
  --band-line: rgba(255,255,255,0.7);
  --band-line-faint: rgba(255,255,255,0.45);
  --band-button: #ffffff;
  --band-button-hover: #e3eaf6;
  --on-band-button: #1c2e55;
  --toggle-knob: #ffffff;
  --on-toggle-knob: #e8640a;
  --toggle-knob-ring: #ff7a1a;
  --court-line: #ffffff;
  --logo-ground: #ffffff;
  --ball: #ff7a1a;
  --on-ball: #1a0e05;
  --win: #0f7a52;
  --loss: #c23a1d;
  --focus: #45659e;
  --shadow-raised: 0 1px 2px rgba(10,42,102,0.08), 0 4px 12px rgba(10,42,102,0.06);
  --font-display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-18: 72px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-ball: 999px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #0b1220;
  --surface-raised: #131c2e;
  --blue-soft: #26375a;
  --line: #26324a;
  --line-strong: #64759a;
  --ink: #edf1f9;
  --ink-muted: #a2aec4;
  --club-blue: #8fa9dc;
  --club-blue-hover: #b0c4ea;
  --on-blue: #06101f;
  --navy: #18284a;
  --on-navy: #ffffff;
  --on-navy-muted: #b9c8e8;
  --band: #18284a;
  --on-band: #ffffff;
  --on-band-muted: #b9c8e8;
  --band-accent: #b9c8e8;
  --band-line: rgba(255,255,255,0.22);
  --band-line-faint: rgba(255,255,255,0.14);
  --band-button: #8fa9dc;
  --band-button-hover: #b0c4ea;
  --on-band-button: #06101f;
  --toggle-knob: #8fa9dc;
  --on-toggle-knob: #06101f;
  --toggle-knob-ring: rgba(143,169,220,0);
  --court-line: #ffffff;
  --logo-ground: #f5f7fb;
  --ball: #ff8c3a;
  --on-ball: #1a0e05;
  --win: #4fd19a;
  --loss: #ff8a70;
  --focus: #b0c4ea;
  --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --surface: #0b1220;
    --surface-raised: #131c2e;
    --blue-soft: #26375a;
    --line: #26324a;
    --line-strong: #64759a;
    --ink: #edf1f9;
    --ink-muted: #a2aec4;
    --club-blue: #8fa9dc;
    --club-blue-hover: #b0c4ea;
    --on-blue: #06101f;
    --navy: #18284a;
    --on-navy: #ffffff;
    --on-navy-muted: #b9c8e8;
    --band: #18284a;
    --on-band: #ffffff;
    --on-band-muted: #b9c8e8;
    --band-accent: #b9c8e8;
    --band-line: rgba(255,255,255,0.22);
    --band-line-faint: rgba(255,255,255,0.14);
    --band-button: #8fa9dc;
    --band-button-hover: #b0c4ea;
    --on-band-button: #06101f;
    --toggle-knob: #8fa9dc;
    --on-toggle-knob: #06101f;
    --toggle-knob-ring: rgba(143,169,220,0);
    --court-line: #ffffff;
    --logo-ground: #f5f7fb;
    --ball: #ff8c3a;
    --on-ball: #1a0e05;
    --win: #4fd19a;
    --loss: #ff8a70;
    --focus: #b0c4ea;
    --shadow-raised: 0 1px 2px rgba(0,0,0,0.4);
  }
}