/* ==========================================================================
   Storied Sports — Design Tokens
   Source of truth: Figma file "Storied Sports - Website" (Primitives + Colors
   variable collections). Do not hardcode hex/px values in component CSS —
   reference these custom properties instead. See storied-sports-styleguide.md
   for the full component spec these tokens support.
   ========================================================================== */

:root {
  /* ---- 1.1 Neutral primitives ---- */
  --neutral-0: #FFFFFF;
  --neutral-25: #FFFDFA;
  --neutral-50: #F7F3EC;
  --neutral-100: #EDE8DF;
  --neutral-150: #E5DFD3;
  --neutral-200: #DDD6C8;
  --neutral-250: #D1C7B7;
  --neutral-300: #C4B9A6;
  --neutral-350: #AFA595;
  --neutral-400: #9B9284;
  --neutral-450: #837869;
  --neutral-500: #6B5E4D;
  --neutral-550: #5B5043;
  --neutral-600: #4A4238;
  --neutral-650: #3F3830;
  --neutral-700: #332D27;
  --neutral-750: #2B2621;
  --neutral-800: #231F1B;
  --neutral-850: #1C1915;
  --neutral-900: #14120F;
  --neutral-950: #0F0D0B;
  --neutral-1000: #0A0806;

  /* ---- 1.2 Accent & semantic primitives ---- */
  --accent-lime: #C9A96E;
  --accent-lime-dark: #A8893E;
  --semantic-error: #B5524A;
  --semantic-link: #7A6B4E;
  --semantic-success: #5A8A5C;
  --semantic-info: #5A7A9E;
  --semantic-warning: #C49A3C;

  /* ---- 1.3 Sport primitives ---- */
  --sport-soccer: #6B8C5A;
  --sport-basketball: #C4854A;
  --sport-hockey: #5A7A9E;
  --sport-tennis: #B5A04A;
  --sport-softball: #A65A5A;
  --sport-volleyball: #8C6B9E;
  --sport-golf: #5A8C7A;
  --sport-cycling: #5A8C7A; /* confirmed: Figma Cycling badge base */
  --sport-gymnastics: #A6637A;
  --sport-business: #7A756B;
  --sport-multi: #5A554E;

  /* ---- 1.4 Card-palette primitives ---- */
  --card-palette-border-base: #9B9284;
  --card-palette-surface-base: #FFF9F0; /* Figma: card/background/default */
  /* note: current Light card/border/default resolves to neutral-100, not card-palette/border-base */

  /* ---- 1.5 Complementary palette (optional supporting colours) ---- */
  --complementary-sand: #C9A96E;
  --complementary-mustard: #A8893E;
  --complementary-orange: #C4854A;
  --complementary-taupe: #7A756B;
  --complementary-teal: #5A8C7A;
  --complementary-rose: #A6637A;
  --complementary-blue: #5A7A9E;
  --complementary-brown: #5A554E;
  --complementary-green: #6B8C5A;
  --complementary-red: #A65A5A;
  --complementary-yellow: #B5A04A;
  --complementary-violet: #8C6B9E;

  /* Purple ramp (Staff Pick editorial treatment) */
  --complementary-purple-lightest: #E8DFF1;
  --complementary-purple-lighter: #D7C4E8;
  --complementary-purple-light: #A78BB2;
  --complementary-purple: #8B6C9B;
  --complementary-purple-dark: #6F5A84;
  --complementary-purple-darker: #5E4A6A;
  --complementary-purple-darkest: #33283A;

  --button-focus-opacity: 55; /* percentage, not px */

  /* ---- 1.5 Semantic aliases (LIGHT theme default) ---- */
  --surface-background: #FFFDFA; /* Figma foundations: surface/background (Light) */
  --surface-default: var(--neutral-0);
  --surface-elevated: var(--neutral-0);
  --surface-selected: #F5EEDF;

  --border-default: var(--neutral-200);
  --border-subtle: var(--neutral-100);
  --border-strong: var(--neutral-300);

  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-500);
  --text-muted: var(--neutral-300);
  --text-inverse: var(--neutral-0);
  --text-link: var(--semantic-link);
  --text-placeholder: var(--neutral-500);

  --accent-default: var(--accent-lime);
  --accent-hover: var(--accent-lime-dark);
  --accent-text: var(--neutral-900);

  --feedback-success: var(--semantic-success);
  --feedback-warning: var(--semantic-warning);
  --feedback-error: var(--semantic-error);
  --feedback-info: var(--semantic-info);

  --text-on-accent: var(--accent-text);

  /* Button palette primitives + semantic (Figma Colors / button/*) */
  --button-palette-primary-base: #28201C;
  --button-palette-primary-border: #3D342F;
  --button-palette-primary-hover: #342B26;
  --button-palette-primary-pressed: #241D19;
  --button-primary-bg: var(--button-palette-primary-base);
  --button-primary-text: var(--neutral-0);
  --button-primary-bg-hover: var(--button-palette-primary-hover);
  --button-primary-bg-pressed: var(--button-palette-primary-pressed);
  --button-primary-border: var(--button-palette-primary-border);
  --button-focus-ring: rgba(20,18,15,.55);   /* text/primary @ 55% */
  /* Navigation button states (used by the navbar buttons) */
  --button-nav-primary-bg-hover: #2E2924;
  --button-nav-primary-bg-pressed: #1F1A14;
  --button-nav-secondary-bg-hover: #F5F0E8;
  --button-nav-secondary-bg-pressed: #EBE5DB;
  --button-nav-ghost-bg-hover: #F2EDE3;
  --button-nav-ghost-bg-pressed: #E8E0D4;

  /* Navigation / Icon State */
  --icon-color-inactive: var(--icon-secondary);
  --icon-color-active: var(--text-primary);

  --icon-secondary: var(--neutral-400);

  /* ---- Card tokens (LIGHT) ---- */
  --card-bg-default: var(--card-palette-surface-base);
  --card-bg-hover: var(--neutral-0);
  --card-bg-pressed: var(--card-bg-hover);
  --card-bg-selected: var(--neutral-25);
  --card-bg-disabled: var(--neutral-25);

  --card-border-default: var(--neutral-100);
  --card-border-hover: var(--neutral-450);
  --card-border-pressed: var(--accent-default);
  --card-border-selected: var(--text-link);
  --card-border-disabled: var(--neutral-350);
  --card-border-pressed-width: 1px;

  --card-text-primary: var(--neutral-900);
  --card-text-primary-disabled: var(--neutral-500);
  --card-text-secondary: var(--neutral-600);
  --card-text-secondary-disabled: var(--neutral-500);

  --card-divider: var(--neutral-350);
  --card-divider-disabled: var(--neutral-350);

  --card-focus-ring: var(--text-link);
  --card-ring-pressed: var(--card-border-pressed);

  /* Staff Pick card (colour + opacity tokens; never fade the whole card) */
  /* ---- Author card (Figma author-card/*) ---- */
  --author-card-background: #FFF9F0;
  --author-card-band: #F5EEDF;
  --author-card-border: #EDE8DF;
  --author-card-button-background: #FFFFFF;
  --author-card-button-border: #C4B9A6;
  --shadow-author-card: rgba(0,0,0,.03);
  --shadow-author-card-hover: rgba(0,0,0,.12);
  --shadow-author-card-button-soft: rgba(0,0,0,.08);
  --shadow-author-card-button-tight: rgba(0,0,0,.06);
  --shadow-author-card-button-inset: rgba(0,0,0,.10);
  --shadow-author-card-button-highlight: rgba(255,255,255,.40);
  --card-staff-pick-border: var(--complementary-purple-lighter);
  --card-staff-pick-highlight: var(--complementary-purple);
  --card-staff-pick-tint-start: rgba(215,196,232,0);
  --card-staff-pick-tint-end: rgba(139,108,155,.04);
  --card-staff-pick-shadow-soft: rgba(139,108,155,.10196);
  --card-staff-pick-shadow-tight: rgba(139,108,155,.12);

  /* ---- 1.6 Elevation ---- */
  --elevation-card-y: 4px;
  --elevation-card-blur: 12px;
  --elevation-card-spread: 0px;
  --elevation-hover-y: 8px;
  --elevation-hover-blur: 24px;
  --elevation-hover-spread: -2px;
  --elevation-card-pressed-ring-blur: 3.3px;
  --elevation-card-pressed-ring-spread: 0px;

  --shadow-card: 0 var(--elevation-card-y) var(--elevation-card-blur) var(--elevation-card-spread) rgba(0, 0, 0, 0.08);   /* Elevation/Card */
  --shadow-card-hover: 0 var(--elevation-hover-y) var(--elevation-hover-blur) var(--elevation-hover-spread) rgba(0, 0, 0, 0.12);   /* Elevation/Hover */
  --shadow-card-pressed: 0 1px 4px 0 rgba(20, 18, 15, 0.04);

  --shadow-large-hover: 0 12px 24px 0 rgba(20, 18, 15, 0.12);
  --shadow-large-pressed: 0 1px 4px 0 rgba(20, 18, 15, 0.06);

  /* Button/Surface/* effect styles */
  --effect-button-inset: inset 0 1px 2px rgba(255,255,255,.4), inset 0 -1px 2px rgba(0,0,0,.102);
  --effect-button-default: 0 2px 2px rgba(0,0,0,.0588), 0 6px 12px -4px rgba(0,0,0,.0784);
  --effect-button-hover: 0 2px 2px rgba(0,0,0,.0588), 0 8px 14px -4px rgba(0,0,0,.0784);
  --effect-button-pressed: 0 1px 1px rgba(0,0,0,.0588);
  --effect-button-focus-ring: 0 0 0 2px var(--button-focus-ring);

  --shadow-focus-ring: 0 0 0 3px rgba(20, 18, 15, 0.3);
  --shadow-focus-ring-gold: 0 0 0 3px rgba(201, 169, 110, 0.5);

  /* ---- 1.7 Radius ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-sm-md: 6px;
  --radius-md: 8px;
  --radius-md-lg: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- 1.8 Spacing scale ---- */
  --space-0: 0px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --space-36: 36px;
  --space-40: 40px;
  --space-44: 44px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-72: 72px;
  --space-80: 80px;
  --space-88: 88px;
  --space-96: 96px;
  --space-112: 112px;
  --space-128: 128px;
  --space-144: 144px;
  --space-160: 160px;
  /* full 25-value spacing collection confirmed from Figma */

  /* ---- 1.9 Typography ---- */
  --font-display: "Storica", serif; /* SemiBold/Bold weights per component spec */
  --font-body: "Studio Feixen Sans", sans-serif; /* Regular weight throughout */

  /* Type scale — Figma 'Typography / Responsive' (Desktop mode; Mobile mode below).
     Storica Bold 9xl–3xl · Storica SemiBold 2xl–xl · Studio Feixen Sans Regular lg–xs.
     Tracking 0, case as entered. */
  --fs-9xl: 128px; --lh-9xl: 128px;
  --fs-8xl: 96px; --lh-8xl: 96px;
  --fs-7xl: 72px; --lh-7xl: 72px;
  --fs-6xl: 60px; --lh-6xl: 60px;
  --fs-5xl: 48px; --lh-5xl: 48px;
  --fs-4xl: 36px; --lh-4xl: 40px;
  --fs-3xl: 30px; --lh-3xl: 36px;
  --fs-2xl: 24px; --lh-2xl: 32px;
  --fs-xl: 20px; --lh-xl: 28px;
  --fs-lg: 18px; --lh-lg: 28px;
  --fs-base: 16px; --lh-base: 24px;
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-xs: 12px; --lh-xs: 16px;

  /* Composed text styles = Figma 'Desktop/NN · text-*' / 'Mobile/NN · text-*' (one token, mode-aware) */
  --text-9xl: 700 var(--fs-9xl)/var(--lh-9xl) var(--font-display);
  --text-8xl: 700 var(--fs-8xl)/var(--lh-8xl) var(--font-display);
  --text-7xl: 700 var(--fs-7xl)/var(--lh-7xl) var(--font-display);
  --text-6xl: 700 var(--fs-6xl)/var(--lh-6xl) var(--font-display);
  --text-5xl: 700 var(--fs-5xl)/var(--lh-5xl) var(--font-display);
  --text-4xl: 700 var(--fs-4xl)/var(--lh-4xl) var(--font-display);
  --text-3xl: 700 var(--fs-3xl)/var(--lh-3xl) var(--font-display);
  --text-2xl: 600 var(--fs-2xl)/var(--lh-2xl) var(--font-display);
  --text-xl: 600 var(--fs-xl)/var(--lh-xl) var(--font-display);
  --text-lg: 400 var(--fs-lg)/var(--lh-lg) var(--font-body);
  --text-base: 400 var(--fs-base)/var(--lh-base) var(--font-body);
  --text-sm: 400 var(--fs-sm)/var(--lh-sm) var(--font-body);
  --text-xs: 400 var(--fs-xs)/var(--lh-xs) var(--font-body);

  /* Tile colors that are hard-coded in Figma (tokenised here) */
  --tile-thumb-light: #DDD6C8;
  --tile-thumb-dark: #3D3530;
  --tile-duration-light: #948F85;
  --tile-duration-dark: #7A7268;
  --tile-title-dark: #F0EBE0;
  --badge-scrim: rgba(0, 0, 0, 0.6);
  /* Badges (Figma Colors / badge/*) */
  --badge-neutral-bg: var(--neutral-200);
  --badge-neutral-border: var(--border-default);
  --badge-neutral-text: var(--text-secondary);
  --badge-staff-pick-bg: var(--complementary-purple-light);
  --badge-staff-pick-fg: var(--text-inverse);

  --text-headline-card: var(--text-xl);
  --text-headline-large: var(--text-3xl);
  --text-headline-section: var(--text-3xl);
  --text-headline-author-lg: var(--text-xl);
  --text-event-date: var(--text-2xl);

  --text-body-ui: var(--text-sm);
  --text-body-description: var(--text-base);
  --text-body-video-title: var(--text-base);
  --text-metadata: var(--text-sm);
  --text-metadata-sm: var(--text-xs);
  --text-inline-button: var(--text-xs);
  --text-nav-link: var(--text-sm);
  --text-footer-nav-desktop: var(--text-5xl);
  --text-footer-nav-mobile: 700 32px/32px var(--font-display);
  --text-footer-secondary: var(--text-sm);
  --text-footer-meta: var(--text-xs);
}

/* ==========================================================================
   DARK THEME — only semantic aliases change; primitives stay fixed.
   Apply via <html data-theme="dark"> or swap to a prefers-color-scheme block.
   ========================================================================== */
:root[data-theme="dark"] {
  --badge-neutral-bg: var(--neutral-300);
  --badge-neutral-border: var(--border-strong);
  --badge-neutral-text: var(--text-inverse);
  --badge-staff-pick-bg: var(--complementary-purple-dark);
  --badge-staff-pick-fg: var(--complementary-purple-lightest);
  --surface-background: var(--neutral-900);
  --surface-default: var(--neutral-800);
  --surface-elevated: var(--neutral-700);
  --surface-selected: var(--neutral-700);

  --border-default: var(--neutral-600);
  --border-subtle: var(--neutral-700);
  --border-strong: var(--neutral-500);

  --text-primary: #FFF9F0; /* Figma foundations: text/primary (Dark) */
  --text-secondary: var(--neutral-300);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-900);
  --text-placeholder: var(--text-secondary);

  --button-primary-bg: var(--neutral-0);
  --button-primary-text: var(--neutral-1000);
  --button-primary-bg-hover: var(--neutral-100);
  --button-primary-bg-pressed: var(--neutral-200);
  --button-primary-border: var(--neutral-600);
  --button-focus-ring: rgba(247,243,236,.55);   /* text/primary @ 55% */
  --button-nav-primary-bg-hover: var(--neutral-100);
  --button-nav-primary-bg-pressed: var(--neutral-200);
  --button-nav-secondary-bg-hover: var(--neutral-700);
  --button-nav-secondary-bg-pressed: var(--neutral-600);
  --button-nav-ghost-bg-hover: var(--neutral-700);
  --button-nav-ghost-bg-pressed: var(--neutral-600);

  --card-bg-default: var(--neutral-700);
  --card-bg-hover: var(--neutral-650);
  --card-bg-pressed: var(--card-bg-hover);
  --card-bg-selected: var(--neutral-650);
  --card-bg-disabled: var(--neutral-800);

  --card-border-default: var(--neutral-550);
  --card-border-hover: var(--neutral-450);
  --card-border-pressed: var(--accent-default);
  --card-border-selected: var(--accent-default);
  --card-border-disabled: var(--neutral-600);

  --card-text-primary: var(--neutral-50);
  --card-text-primary-disabled: var(--neutral-300);
  --card-text-secondary: var(--neutral-200);
  --card-text-secondary-disabled: var(--neutral-350);

  --card-divider: var(--neutral-450);
  --card-divider-disabled: var(--neutral-600);

  /* ---- Author card (Dark) ---- */
  --author-card-background: #231F1B;
  --author-card-band: #332D27;
  --author-card-border: #4A4238;
  --author-card-button-background: #332D27;
  --author-card-button-border: #4A4238;
  --shadow-author-card: rgba(0,0,0,.30);
  --shadow-author-card-hover: rgba(0,0,0,.45);
  --card-staff-pick-border: var(--complementary-purple-dark);
  --card-staff-pick-highlight: var(--complementary-purple-light);
  --card-staff-pick-tint-start: rgba(111,90,132,0);
  --card-staff-pick-tint-end: rgba(167,139,178,.4);
  --card-staff-pick-shadow-soft: rgba(51,40,58,.10196);
  --card-staff-pick-shadow-tight: rgba(51,40,58,.12);

  --card-focus-ring: var(--accent-default);
}

/* ==========================================================================
   MOBILE type mode — Figma 'Typography / Responsive' → Mobile.
   Applies under 768px, or force with <html data-type-mode="mobile">.
   ========================================================================== */
@media (max-width: 767px) {
  :root {
    --fs-9xl: 64px; --lh-9xl: 64px;
    --fs-8xl: 56px; --lh-8xl: 56px;
    --fs-7xl: 48px; --lh-7xl: 48px;
    --fs-6xl: 40px; --lh-6xl: 44px;
    --fs-5xl: 32px; --lh-5xl: 36px;
    --fs-4xl: 28px; --lh-4xl: 32px;
    --fs-3xl: 24px; --lh-3xl: 28px;
    --fs-2xl: 20px; --lh-2xl: 28px;
    --fs-xl: 18px; --lh-xl: 24px;
    --fs-lg: 16px; --lh-lg: 24px;
    --fs-base: 16px; --lh-base: 24px;
    --fs-sm: 14px; --lh-sm: 20px;
    --fs-xs: 12px; --lh-xs: 16px;
  }
}
:root[data-type-mode="mobile"] {
  --fs-9xl: 64px; --lh-9xl: 64px;
  --fs-8xl: 56px; --lh-8xl: 56px;
  --fs-7xl: 48px; --lh-7xl: 48px;
  --fs-6xl: 40px; --lh-6xl: 44px;
  --fs-5xl: 32px; --lh-5xl: 36px;
  --fs-4xl: 28px; --lh-4xl: 32px;
  --fs-3xl: 24px; --lh-3xl: 28px;
  --fs-2xl: 20px; --lh-2xl: 28px;
  --fs-xl: 18px; --lh-xl: 24px;
  --fs-lg: 16px; --lh-lg: 24px;
  --fs-base: 16px; --lh-base: 24px;
  --fs-sm: 14px; --lh-sm: 20px;
  --fs-xs: 12px; --lh-xs: 16px;
}