/* Skipper design tokens — single source of truth for both themes.
   Palette: near-black + volt (FPL-style). Never hardcode these values in
   components; always go through the vars. */

:root {
  /* Brand */
  --brand-black: #0D0D0D;
  --brand-volt: #EBFF00;
  --on-volt: #0D0D0D;

  /* Fixture difficulty (FDR buckets: 1-2 easy, 3 medium, 4-5 hard) */
  --fdr-easy: #1F8A57;
  --on-fdr-easy: #C9F2DD;
  --fdr-hard: #B03038;
  --on-fdr-hard: #FAD2D4;
  --fdr-easy-line: #2FAE70;
  --fdr-medium-line: #8A8A8A;
  --fdr-hard-line: #E05656;

  /* Tag tiers */
  --tag-strong: var(--brand-volt);
  --tag-good: #4ADE80;
  --tag-avoid: #F87171;

  /* Layout */
  --radius-card: 12px;
  --radius-chip: 5px;
  --pad-page: 18px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Space Grotesk", "Inter", -apple-system, sans-serif;

  /* Image CDNs (official FPL resources) */
  --radius-hero: 24px;
}

:root,
[data-theme="dark"] {
  --bg: #0D0D0D;
  --surface: #1A1A1A;
  --surface-raised: #262626;
  --hairline: #2B2B2B;
  --card-flat: #151515;
  --text: #FFFFFF;
  --text-secondary: #A3A3A3;
  --text-tertiary: #737373;
  --text-soft: #D4D4D4;
  --fdr-medium: #3A3A3A;
  --on-fdr-medium: #CFCFCF;
  --tag-hold: #A3A3A3;
  --accent-link: var(--brand-volt);
  --card-grad: var(--card-flat); /* flat — gradients retired from cards */
  --card-border: #2B2B2B;
  --icon-glow: rgba(235, 255, 0, 0.5);
  --nav-glow: drop-shadow(0 0 6px rgba(235, 255, 0, 0.45));
  --hero-grad: var(--card-flat); /* flat — the corner glow read as AI-generated */
  --pitch-grad: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 44px, transparent 44px 88px), linear-gradient(180deg, #0B4220 0%, #0E5429 50%, #0B4220 100%);
  --pitch-line: rgba(255, 255, 255, 0.18);
  --chip-on-pitch: rgba(4, 18, 9, 0.62);
}

[data-theme="light"] {
  --bg: #FAFAFA;
  --surface: #FFFFFF;
  --surface-raised: #EEEEEE;
  --hairline: #E5E5E5;
  --text: #111111;
  --text-secondary: #5B5B5B;
  --text-tertiary: #8A8A8A;
  --text-soft: #3D3D3D;
  --fdr-easy: #DCF5E7;
  --on-fdr-easy: #146B41;
  --fdr-medium: #EEEEEE;
  --on-fdr-medium: #4A4A4A;
  --fdr-hard: #FBDDDE;
  --on-fdr-hard: #A02830;
  --fdr-easy-line: #1F8A57;
  --fdr-medium-line: #8A8A8A;
  --fdr-hard-line: #C03038;
  --tag-strong: #5F6A00;
  --tag-good: #15803D;
  --tag-avoid: #B91C1C;
  --tag-hold: #8A8A8A;
  --accent-link: #5F6A00;
  --icon-glow: rgba(95, 106, 0, 0.55);
  --nav-glow: drop-shadow(2px 2px 0 var(--brand-volt));
  --card-grad: var(--surface); /* flat — gradients retired from cards */
  --card-border: #E3E5EA;
  --hero-grad: var(--surface); /* flat, matching the retired card gradients */
  --pitch-grad: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 44px, transparent 44px 88px), linear-gradient(180deg, #0E5429 0%, #12662F 50%, #0E5429 100%);
  --pitch-line: rgba(255, 255, 255, 0.2);
  --chip-on-pitch: rgba(4, 18, 9, 0.62);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #FAFAFA;
    --surface: #FFFFFF;
    --surface-raised: #EEEEEE;
    --hairline: #E5E5E5;
    --text: #111111;
    --text-secondary: #5B5B5B;
    --text-tertiary: #8A8A8A;
    --text-soft: #3D3D3D;
    --fdr-easy: #DCF5E7;
    --on-fdr-easy: #146B41;
    --fdr-medium: #EEEEEE;
    --on-fdr-medium: #4A4A4A;
    --fdr-hard: #FBDDDE;
    --on-fdr-hard: #A02830;
    --tag-strong: #5F6A00;
    --tag-good: #15803D;
    --tag-avoid: #B91C1C;
    --tag-hold: #8A8A8A;
    --accent-link: #5F6A00;
    --icon-glow: rgba(95, 106, 0, 0.55);
    --nav-glow: drop-shadow(2px 2px 0 var(--brand-volt));
  }
}