/* KoraPlus design tokens (CLAUDE.md / Figma Foundations). The only file with color values. */
:root {
  --kp-bg-app: #0B1220;
  --kp-bg-surface: #131C2E;
  --kp-bg-raised: #1E2A42;
  --kp-bg-nav: #0E1627;
  --kp-text-primary: #F2F5FA;
  --kp-text-secondary: #8D9AB0;
  --kp-text-on-accent: #0B1220;
  --kp-accent-default: #2EE6A6;
  --kp-accent-text: #2EE6A6;
  --kp-accent-subtle: #123D33;
  --kp-live-default: #FF5A5F;
  --kp-premium-default: #E8B84B;
  --kp-premium-text: #E8B84B;
  --kp-premium-surface: #2A2210;
  --kp-border-default: #1E2A42;
  --kp-border-dashed: #2A3858;
  --kp-pitch-field: #0F3D2E;
  --kp-pitch-line: #1F6B50;
  --kp-pitch-player: #F2F5FA;
  --kp-pitch-player-text: #0B1220;
  --kp-event-yellow-card: #F2C94C;
  --kp-event-red-card: #FF5A5F;

  --kp-space-xs: 4px;
  --kp-space-sm: 8px;
  --kp-space-md: 12px;
  --kp-space-lg: 16px;
  --kp-space-xl: 24px;
  --kp-space-2xl: 32px;
  --kp-radius-sm: 8px;
  --kp-radius-md: 12px;
  --kp-radius-lg: 16px;
  --kp-radius-xl: 24px;
  --kp-radius-full: 999px;
  color-scheme: dark;
}

/* Light: the system setting unless the visitor chose Dark, or an explicit Light choice. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --kp-bg-app: #F4F6FA;
    --kp-bg-surface: #FFFFFF;
    --kp-bg-raised: #E6EAF2;
    --kp-bg-nav: #FFFFFF;
    --kp-text-primary: #0B1220;
    --kp-text-secondary: #5B6780;
    --kp-accent-text: #0B7656; /* website: darker than the Figma #0E8F68 for WCAG AA on light backgrounds */
    --kp-accent-subtle: #D9F8EC;
    --kp-premium-text: #8A6A12;
    --kp-premium-surface: #FFF4D6;
    --kp-border-default: #E6EAF2;
    --kp-border-dashed: #C9D1E0;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --kp-bg-app: #F4F6FA;
  --kp-bg-surface: #FFFFFF;
  --kp-bg-raised: #E6EAF2;
  --kp-bg-nav: #FFFFFF;
  --kp-text-primary: #0B1220;
  --kp-text-secondary: #5B6780;
  --kp-accent-text: #0B7656; /* website: darker than the Figma #0E8F68 for WCAG AA on light backgrounds */
  --kp-accent-subtle: #D9F8EC;
  --kp-premium-text: #8A6A12;
  --kp-premium-surface: #FFF4D6;
  --kp-border-default: #E6EAF2;
  --kp-border-dashed: #C9D1E0;
  color-scheme: light;
}