:root {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-raised: #F5F5F4;
  --color-hover: #EDEDEB;
  --color-line: #E4E4E1;
  --color-line-strong: #C9C9C6;
  --color-dot: #D6D6D2;
  --color-text: #0B0B0C;
  --color-text-quiet: #5C5C63;
  --color-text-faint: #6B6B70;
  --color-on-text: #FFFFFF;
  --color-live: #188045;
  --color-danger: #B8321C;
  --color-overlay: rgba(11, 11, 12, 0.32);
  --color-intensity-low: #9FCDB2;
  --color-intensity-medium: #188045;
  --color-intensity-high: #B8321C;
  --color-turf: #2C7A45;
  --color-turf-stripe: #338650;
  --color-pitch-line: #F2F2F0;
  --color-team-a: #FF7A2F;
  --color-team-b: #4C9BFF;
  --color-keeper: #F5D547;
  --color-pitch-glow: rgba(44, 122, 69, 0.4);
  --color-player-ring: #FFFFFF;
  --color-pitch-shade: #000000;
  --color-pitch-ink: #111111;
  --font-sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --size-xs: 12px;
  --size-sm: 13px;
  --size-md: 15px;
  --size-lg: 18px;
  --size-xl: 24px;
  --size-display: 36px;
  --size-hero: 64px;
  --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-9: 36px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-round: 999px;
  --touch-target: 44px;
  --page-max: 1200px;
}

[data-theme="light"] {
  color-scheme: light;
  --color-bg: #FFFFFF;
  --color-raised: #F5F5F4;
  --color-hover: #EDEDEB;
  --color-line: #E4E4E1;
  --color-line-strong: #C9C9C6;
  --color-dot: #D6D6D2;
  --color-text: #0B0B0C;
  --color-text-quiet: #5C5C63;
  --color-text-faint: #6B6B70;
  --color-on-text: #FFFFFF;
  --color-live: #188045;
  --color-danger: #B8321C;
  --color-overlay: rgba(11, 11, 12, 0.32);
  --color-intensity-low: #9FCDB2;
  --color-intensity-medium: #188045;
  --color-intensity-high: #B8321C;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #000000;
  --color-raised: #0B0B0C;
  --color-hover: #161618;
  --color-line: #222224;
  --color-line-strong: #333336;
  --color-dot: #2A2A2D;
  --color-text: #F2F2F0;
  --color-text-quiet: #A3A3A8;
  --color-text-faint: #8A8A8F;
  --color-on-text: #000000;
  --color-live: #3FB86A;
  --color-danger: #F2643E;
  --color-overlay: rgba(0, 0, 0, 0.64);
  --color-intensity-low: #1F5C38;
  --color-intensity-medium: #3FB86A;
  --color-intensity-high: #F2643E;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #000000;
    --color-raised: #0B0B0C;
    --color-hover: #161618;
    --color-line: #222224;
    --color-line-strong: #333336;
    --color-dot: #2A2A2D;
    --color-text: #F2F2F0;
    --color-text-quiet: #A3A3A8;
    --color-text-faint: #8A8A8F;
    --color-on-text: #000000;
    --color-live: #3FB86A;
    --color-danger: #F2643E;
    --color-overlay: rgba(0, 0, 0, 0.64);
    --color-intensity-low: #1F5C38;
    --color-intensity-medium: #3FB86A;
    --color-intensity-high: #F2643E;
  }
}