/* ==========================================================================
   Boater League — Design Tokens
   Light: off-white + green
   Dark: dark green + gold
   ========================================================================== */

:root {
  /* Brand primitives */
  --bl-green-950: #07140f;
  --bl-green-900: #0c1f17;
  --bl-green-800: #123328;
  --bl-green-700: #1a4a38;
  --bl-green-600: #21664c;
  --bl-green-500: #2a7d5c;
  --bl-green-400: #3d9a74;
  --bl-green-300: #6bb894;
  --bl-gold-500: #d4893a;
  --bl-gold-400: #e09a4f;
  --bl-gold-300: #e8b06e;
  --bl-gold-200: #f0c794;
  --bl-offwhite: #f4f1ea;
  --bl-paper: #faf8f3;
  --bl-ink: #10211a;
  --bl-ink-soft: #3d5248;
  --bl-ink-muted: #6b7f74;
  --bl-danger: #b5473a;
  --bl-success: #2d7a5a;

  /* Typography */
  --font-display: "Syne", "Arial Narrow", sans-serif;
  --font-body: "Instrument Sans", "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --text-xs: clamp(0.7rem, 0.68rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-2xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --text-3xl: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem);
  --text-hero: clamp(2.75rem, 1.8rem + 4vw, 5.5rem);

  --leading-tight: 1.05;
  --leading-snug: 1.25;
  --leading-normal: 1.55;
  --leading-relaxed: 1.7;
  --tracking-tight: -0.03em;
  --tracking-display: -0.04em;
  --tracking-wide: 0.08em;
  --tracking-label: 0.14em;

  /* Space */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --section-y: clamp(4.5rem, 8vw, 8rem);
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --content-max: 72rem;
  --content-narrow: 40rem;
  --content-wide: 84rem;

  /* Shape */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-fast: 150ms;
  --dur-base: 280ms;
  --dur-slow: 500ms;

  /* Layout chrome */
  --header-h: 5.25rem;
  --z-header: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Default semantic = light (off-white + green) */
  --color-bg: var(--bl-offwhite);
  --color-bg-elevated: var(--bl-paper);
  --color-surface: #ffffff;
  --color-surface-muted: #ebe7de;
  --color-ink: var(--bl-ink);
  --color-ink-soft: var(--bl-ink-soft);
  --color-ink-muted: var(--bl-ink-muted);
  --color-border: rgba(16, 33, 26, 0.12);
  --color-border-strong: rgba(16, 33, 26, 0.22);
  --color-accent: var(--bl-green-600);
  --color-accent-hover: var(--bl-green-700);
  --color-accent-soft: rgba(33, 102, 76, 0.12);
  --color-accent-text: var(--bl-green-700);
  --color-highlight: var(--bl-gold-500);
  --color-hero-bg: var(--bl-offwhite);
  --color-hero-ink: var(--bl-ink);
  --color-hero-muted: rgba(16, 33, 26, 0.68);
  --color-hero-accent: var(--bl-green-600);
  --color-overlay: rgba(244, 241, 234, 0.72);
  --color-focus: var(--bl-green-500);
  --color-inverse-surface: var(--bl-green-900);
  --color-inverse-ink: var(--bl-offwhite);
  --color-logo: var(--bl-green-700);
  --color-on-accent: #faf8f3;
  --shadow-sm: 0 1px 2px rgba(16, 33, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 33, 26, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 33, 26, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);
}

/* Explicit light — always wins when selected */
html[data-theme="light"] {
  color-scheme: light;
  --color-bg: var(--bl-offwhite);
  --color-bg-elevated: var(--bl-paper);
  --color-surface: #ffffff;
  --color-surface-muted: #ebe7de;
  --color-ink: var(--bl-ink);
  --color-ink-soft: var(--bl-ink-soft);
  --color-ink-muted: var(--bl-ink-muted);
  --color-border: rgba(16, 33, 26, 0.12);
  --color-border-strong: rgba(16, 33, 26, 0.22);
  --color-accent: var(--bl-green-600);
  --color-accent-hover: var(--bl-green-700);
  --color-accent-soft: rgba(33, 102, 76, 0.12);
  --color-accent-text: var(--bl-green-700);
  --color-highlight: var(--bl-gold-500);
  --color-hero-bg: var(--bl-offwhite);
  --color-hero-ink: var(--bl-ink);
  --color-hero-muted: rgba(16, 33, 26, 0.68);
  --color-hero-accent: var(--bl-green-600);
  --color-overlay: rgba(244, 241, 234, 0.72);
  --color-focus: var(--bl-green-500);
  --color-inverse-surface: var(--bl-green-900);
  --color-inverse-ink: var(--bl-offwhite);
  --color-logo: var(--bl-green-700);
  --color-on-accent: #faf8f3;
  --shadow-sm: 0 1px 2px rgba(16, 33, 26, 0.06);
  --shadow-md: 0 8px 24px rgba(16, 33, 26, 0.08);
  --shadow-lg: 0 20px 48px rgba(16, 33, 26, 0.14);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);
}

/* Explicit dark — dark green + gold */
html[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: var(--bl-green-950);
  --color-bg-elevated: var(--bl-green-900);
  --color-surface: var(--bl-green-800);
  --color-surface-muted: var(--bl-green-700);
  --color-ink: var(--bl-offwhite);
  --color-ink-soft: rgba(244, 241, 234, 0.78);
  --color-ink-muted: rgba(244, 241, 234, 0.55);
  --color-border: rgba(224, 154, 79, 0.16);
  --color-border-strong: rgba(224, 154, 79, 0.28);
  --color-accent: var(--bl-gold-400);
  --color-accent-hover: var(--bl-gold-300);
  --color-accent-soft: rgba(212, 137, 58, 0.16);
  --color-accent-text: var(--bl-gold-300);
  --color-highlight: var(--bl-gold-400);
  --color-hero-bg: #050f0b;
  --color-hero-ink: var(--bl-offwhite);
  --color-hero-muted: rgba(244, 241, 234, 0.68);
  --color-hero-accent: var(--bl-gold-400);
  --color-overlay: rgba(5, 15, 11, 0.72);
  --color-focus: var(--bl-gold-400);
  --color-inverse-surface: #163528;
  --color-inverse-ink: var(--bl-offwhite);
  --color-logo: var(--bl-gold-400);
  --color-on-accent: var(--bl-green-950);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
  --shadow-focus: 0 0 0 3px var(--color-accent-soft);
}

/* System preference only when theme not yet chosen */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    color-scheme: dark;
    --color-bg: var(--bl-green-950);
    --color-bg-elevated: var(--bl-green-900);
    --color-surface: var(--bl-green-800);
    --color-surface-muted: var(--bl-green-700);
    --color-ink: var(--bl-offwhite);
    --color-ink-soft: rgba(244, 241, 234, 0.78);
    --color-ink-muted: rgba(244, 241, 234, 0.55);
    --color-border: rgba(224, 154, 79, 0.16);
    --color-border-strong: rgba(224, 154, 79, 0.28);
    --color-accent: var(--bl-gold-400);
    --color-accent-hover: var(--bl-gold-300);
    --color-accent-soft: rgba(212, 137, 58, 0.16);
    --color-accent-text: var(--bl-gold-300);
    --color-highlight: var(--bl-gold-400);
    --color-hero-bg: #050f0b;
    --color-hero-ink: var(--bl-offwhite);
    --color-hero-muted: rgba(244, 241, 234, 0.68);
    --color-hero-accent: var(--bl-gold-400);
    --color-overlay: rgba(5, 15, 11, 0.72);
    --color-focus: var(--bl-gold-400);
    --color-inverse-surface: #163528;
    --color-inverse-ink: var(--bl-offwhite);
    --color-logo: var(--bl-gold-400);
    --color-on-accent: var(--bl-green-950);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.45);
    --shadow-focus: 0 0 0 3px var(--color-accent-soft);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}