/* ==========================================================================
   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: #FFF9F0;   /* Figma 2026-10-23 (was #F7F3EC) */
  --neutral-100: #EDE8DF;
  --neutral-200: #DDD6C8;
  --neutral-250: #D1C7B7;
  --neutral-300: #C4B9A6;
  --neutral-350: #AFA595;
  --neutral-400: #9B9284;
  --neutral-450: #837869;
  --neutral-500: #6B5E4D;
  --neutral-600: #4A4238;
  --neutral-650: #3F3830;
  --neutral-700: #332D27;
  --neutral-800: #231F1B;
  --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;
  /* Contrast primitives (Figma 2026-10-25, WCAG AA 4.5:1 on surface/background) */
  --semantic-success-on-light: #517C53;
  --semantic-success-on-dark: #629664;
  --semantic-error-on-dark: #C4756E;
  --semantic-link-on-dark: #9B8863;

  /* ---- 1.3 Sport palette primitives (Figma Primitives sport-palette/*, 13; 2026-10-23) ---- */
  --sport-palette-blue: #5A7A9E;
  --sport-palette-orange: #C4854A;
  --sport-palette-green: #6B8C5A;
  --sport-palette-taupe: #5A554E;
  --sport-palette-red: #A65A5A;
  --sport-palette-mustard: #B5A04A;
  --sport-palette-violet: #8C6B9E;
  --sport-palette-teal: #5A8C7A;
  --sport-palette-rose: #A6637A;
  --sport-palette-slate: #6E7F8F;
  --sport-palette-clay: #A8705A;   /* not assigned yet */
  --sport-palette-olive: #8A8C52;
  --sport-palette-plum: #7A5A78;   /* not assigned yet */

  /* ---- 1.3b Sport Colors collection (32): each league / sport aliases the palette and has its own -text ---- */
  --sport-pwhl: var(--sport-palette-blue);        --sport-pwhl-text: #000000;
  --sport-wnba: var(--sport-palette-orange);      --sport-wnba-text: #000000;
  --sport-nwsl: var(--sport-palette-green);       --sport-nwsl-text: #000000;
  --sport-ncaa: var(--sport-palette-taupe);       --sport-ncaa-text: #FFFFFF;
  --sport-ausl: var(--sport-palette-red);         --sport-ausl-text: #FFFFFF;
  --sport-tennis: var(--sport-palette-mustard);   --sport-tennis-text: #000000;
  --sport-volleyball: var(--sport-palette-violet); --sport-volleyball-text: #000000;
  --sport-golf: var(--sport-palette-teal);        --sport-golf-text: #000000;
  --sport-gymnastics: var(--sport-palette-rose);  --sport-gymnastics-text: #000000;
  --sport-cycling: var(--sport-palette-olive);    --sport-cycling-text: #000000;   /* olive (was teal, same as golf) */
  --sport-soccer: var(--sport-palette-green);     --sport-soccer-text: var(--sport-nwsl-text);
  --sport-basketball: var(--sport-palette-orange); --sport-basketball-text: var(--sport-wnba-text);
  --sport-hockey: var(--sport-palette-blue);      --sport-hockey-text: var(--sport-pwhl-text);
  --sport-softball: var(--sport-palette-red);     --sport-softball-text: var(--sport-ausl-text);
  --sport-business: var(--sport-palette-slate);   --sport-business-text: #000000;   /* black (5.1:1 on slate; white was 4.12:1), Figma 2026-10-23 20:30 */
  --sport-multi: var(--sport-palette-taupe);      --sport-multi-text: var(--sport-ncaa-text);

  /* ---- Button focus ---- */
  --button-focus-opacity: 55%;   /* Primitives button/focus-opacity (restored 2026-10-23) */

  /* ---- 1.4 Card-palette primitives ---- */
  --card-palette-surface-base: #FFFDFA; /* Figma card-palette/surface-base (= neutral/25). Cards use card/background/default = neutral/50 (decision A7) */
  /* Filter Chip colours: Figma Colors filter-chip/* (Light below, Dark in the dark block; variables added 2026-10-23) */
  --filter-chip-background: #F5F0E8;
  --filter-chip-border: #DDD8CE;
  /* 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-blue: #5A7A9E;
  --complementary-red: #A65A5A;
  --complementary-yellow: #B5A04A;
  --complementary-blue-on-light: #567598;       /* contrast primitive (feedback/info Light) */
  --complementary-red-on-dark: #B77979;         /* contrast primitive (text/link-action Dark) */
  --complementary-red-on-dark-hover: #C59494;   /* contrast primitive (text/link-action-hover Dark) */

  /* 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-darkest: #33283A;

  --glass: rgb(255 255 255 / 50%);   /* Figma Primitives / Glass (#FFFFFF @ 50%, re-read 2026-10-25; was 20% in code) */
  --button-palette-primary-border-dark: #E5E1D8;   /* Figma Primitives button-palette/primary-border-dark (added 2026-10-23) */

  /* ---- 1.5 Semantic aliases (LIGHT theme default) ---- */
  --surface-background: var(--neutral-25);   /* Figma surface/background → neutral/25 */
  --surface-default: var(--neutral-0);
  --surface-elevated: var(--neutral-0);
  --surface-selected: #F5EEDF;
  --image-placeholder: var(--neutral-200);   /* Figma image/placeholder: fill for empty thumbnails */
  /* ---- Media overlays (Figma Colors surface/media-overlay 2347:2, text/on-media 2347:3; Prompt 23): same value in Light and Dark on purpose, overlays on photos and video stay dark ---- */
  --surface-media-overlay: rgb(18 18 18 / 80%);   /* Figma #121212CC */
  --text-on-media: #FFFFFF;
  /* ---- Avatar (Figma Colors avatar/*, 2026-10-25): soft backgrounds for initials avatars; the colour comes from a hash of the initials ---- */
  --avatar-sand: #E6DCC3;
  --avatar-clay: #EBCDBE;
  --avatar-sage: #CFDDC6;
  --avatar-sky: #C9DCE6;
  --avatar-lilac: #D9D1E8;
  --avatar-rose: #EDCFD5;
  --avatar-gold: #EBD8A2;

  --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-link-action: var(--complementary-red);   /* Figma text/link-action = complementary/red (inline links, Badge Type=Link) */
  --text-link-action-hover: #85403F;  /* Figma text/link-action-hover */
  --text-placeholder: var(--text-secondary);   /* Figma: → text/secondary */

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

  --feedback-success: var(--semantic-success-on-light);
  --feedback-error: var(--semantic-error);
  --feedback-info: var(--complementary-blue-on-light);

  --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-destructive-bg: #B5524A;          /* Figma button/destructive/background (Prompt 14 A5); Dark value not read yet: same in both modes */
  --button-destructive-bg-hover: #A3463F;
  --button-destructive-bg-pressed: #8F3C36;
  --button-primary-border: var(--button-palette-primary-border);
  --button-focus-ring: color-mix(in srgb, var(--text-primary) var(--button-focus-opacity), transparent);   /* text/primary @ button/focus-opacity */
  /* 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;

  /* Button Secondary / Ghost (Figma Button 506:6060 fills are raw values; kept as component tokens) */
  --button-secondary-bg: var(--surface-default);
  --button-inverse-bg-hover: #F7F5F0;   /* raw in Figma Button (Secondary hover / Inverse hover) */
  --button-inverse-bg-pressed: #EDEBE3;
  --button-secondary-bg-hover: var(--button-inverse-bg-hover);
  --button-secondary-bg-pressed: var(--button-inverse-bg-pressed);
  --button-secondary-bg-disabled: var(--neutral-100);
  --button-secondary-border: var(--button-palette-primary-border-dark);   /* #E5E1D8 */
  --button-secondary-border-hover: var(--neutral-200);
  --button-secondary-border-pressed: var(--neutral-300);
  --button-secondary-text-disabled: var(--neutral-500);
  --button-ghost-bg-hover: var(--button-nav-ghost-bg-hover);
  --button-ghost-bg-pressed: var(--button-nav-ghost-bg-pressed);

  /* 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(--neutral-50);   /* Figma card/background/default → neutral/50 */
  --card-bg-hover: var(--neutral-0);

  --card-border-pressed-width: 1px;

  --card-text-secondary: var(--neutral-600);

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

  --card-focus-ring: var(--text-link);
  --card-ring-pressed: var(--accent-default);   /* card/ring/pressed → accent/default (alias fixed in Figma 2026-10-25) */

  /* Staff Pick card (colour + opacity tokens; never fade the whole card) */
  /* ---- Author card (Figma author-card/*) ---- */
  --author-card-background: var(--card-bg-default);   /* band → surface/selected, border → border/subtle, buttons → Button */
  --shadow-author-card: rgba(0,0,0,.03);
  --shadow-author-card-hover: rgba(0,0,0,.12);
  --card-staff-pick-border: var(--complementary-purple-lighter);
  --card-staff-pick-highlight: var(--complementary-purple);
  --card-staff-pick-tint-start: color-mix(in srgb, var(--complementary-purple-lighter) 0%, transparent);
  --card-staff-pick-tint-end: color-mix(in srgb, var(--complementary-purple) 40%, transparent);   /* Figma 40% (confirmed by Isabel 2026-10-23) */
  --card-staff-pick-shadow-soft: color-mix(in srgb, var(--complementary-purple) 10.196%, transparent);
  --card-staff-pick-shadow-tight: color-mix(in srgb, var(--complementary-purple) 12%, transparent);

  /* ---- 1.6 Elevation ---- */
  --elevation-card-y: 4px;
  --elevation-card-blur: 12px;
  --elevation-card-spread: 0px;
  --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 8px 24px -2px rgba(0, 0, 0, 0.12);   /* Elevation/Hover (effect style; the elevation/hover-* variables were removed) */
  --shadow-hover: var(--shadow-card-hover);

  --shadow-large-hover: 0 12px 24px 0 rgba(0, 0, 0, 0.12);
  /* Card shadows drawn as raw effects inside the Figma card components (no effect style); one token each so they stay consistent */
  /* Figma effect styles added 2026-10-23 */
  --shadow-card-rest: 0 2px 8px rgba(0, 0, 0, 0.0314);              /* Elevation/Card rest */
  --shadow-card-soft: 0 var(--elevation-card-y) var(--elevation-card-blur) var(--elevation-card-spread) var(--shadow-author-card);   /* Elevation/Card soft (Author card) */
  --shadow-author-card-rest: var(--shadow-card-soft);
  --shadow-card-pressed: 0 1px 4px rgba(0, 0, 0, 0.04), 0 0 var(--elevation-card-pressed-ring-blur) var(--elevation-card-pressed-ring-spread) var(--card-ring-pressed);   /* Elevation/Card pressed */
  --shadow-card-pressed-large: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 var(--elevation-card-pressed-ring-blur) var(--elevation-card-pressed-ring-spread) var(--card-ring-pressed);   /* Elevation/Card pressed large */
  --shadow-card-pressed-ring: var(--shadow-card-pressed);
  --shadow-staff-pick: 0 8px 24px -8px var(--card-staff-pick-shadow-soft), 0 2px 8px var(--card-staff-pick-shadow-tight);   /* Elevation/Staff pick */
  --shadow-glass-bar: 0 4px 16px rgba(0, 0, 0, 0.12);   --blur-glass-bar: 20px;   /* Elevation/Glass bar (background blur 20) */
  --shadow-toolbar: 0 8px 24px rgba(0, 0, 0, 0.25);                  /* Elevation/Toolbar */
  --shadow-popover: 0 12px 32px rgba(0, 0, 0, 0.16);                 /* Elevation/Popover */
  --shadow-sheet: 0 -8px 32px rgba(0, 0, 0, 0.18);                   /* Elevation/Sheet (bottom sheets) */
  --shadow-floating: 0 4px 16px rgba(0, 0, 0, 0.12);                 /* Elevation/Floating */
  --shadow-dropdown: 0 6px 20px -4px color-mix(in srgb, var(--neutral-700) 7.84%, transparent);   /* Elevation/Dropdown */
  --shadow-switch-knob: 0 1px 4px color-mix(in srgb, var(--neutral-900) 6%, transparent);      /* Elevation/Switch knob */
  --shadow-inset-top-highlight: inset 0 1px 0 var(--neutral-0);    /* Inset/Top highlight */
  --shadow-focus-button-ring: var(--effect-button-focus-ring);     /* Focus/Button ring */
  --shadow-button-inset: var(--effect-button-inset);               /* Button/Surface/Inset */
  --blur-overlay: 4px;                                             /* Blur/Overlay */
  /* code-only (raw effects inside components; no effect style) */
  --shadow-card-lift: 0 8px 10px rgba(0, 0, 0, 0.08);               /* Story / Event card hover */
  --shadow-card-content-up: 0 -2px 16px rgba(0, 0, 0, 0.07);        /* text panel over a photo (Main card) */
  --shadow-raised-sm: 0 4px 8px rgba(0, 0, 0, 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);
  /* Figma effect styles Button/Surface/* — every layer (drops, then the top-light and bottom-dark inner shadows) */
  --shadow-button-default: var(--effect-button-default), var(--effect-button-inset);
  --shadow-button-hover: var(--effect-button-hover), var(--effect-button-inset);
  --shadow-button-pressed: var(--effect-button-inset), var(--effect-button-pressed);
  --shadow-button-focus: var(--effect-button-focus-ring), var(--effect-button-default), var(--effect-button-inset);
  --shadow-button-disabled: none;

  --shadow-focus-ring: 0 0 0 3px rgba(20, 18, 15, 0.3);
  --shadow-focus-ring-accent: 0 0 0 3px color-mix(in srgb, var(--accent-default) 50%, transparent);   /* was --shadow-focus-ring-gold (Figma shadow/focus-ring-gold deleted); ring colour is accent/default */

  /* ---- 1.7 Radius ---- */
  --radius-none: 0px;
  --radius-sm: 4px;
  --radius-sm-md: 6px;
  --radius-md: 8px;
  --radius-md-lg: 12px;
  --radius-10: 10px;        /* Figma radius/10 (added 2026-10-25) */
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* ---- 1.8 Spacing scale ---- */
  --space-0: 0px;
  --space-1: 1px;
  --space-2: 2px;
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;         /* Figma Spacing 10 (added 2026-10-25) */
  --space-12: 12px;
  --space-16: 16px;
  --space-18: 18px;         /* Figma Spacing 18 (added 2026-10-25) */
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-32: 32px;
  --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 spacing collection from Figma (0, 1, 2 … 160) */

  /* Studio component sizes (Figma studio/*; studio/documentation-* only size Figma doc frames and are not ported) */
  --studio-page-width: 1440px;
  --studio-author-card-min-height: 296px;
  --studio-video-card-min-height: 320px;

  /* ---- 1.9 Typography ---- */
  --font-display: "Storica", serif; /* SemiBold/Bold weights per component spec */
  --font-body: "Studio Feixen Sans", sans-serif; /* Regular weight throughout */
  --font-signature: "P22 Chatham", cursive; /* Figma Desktop/15 · Signature (40/Auto) · Mobile/15 · Signature (26/Auto) */
  --fs-signature: 40px; --lh-signature: normal;   /* Auto in Figma */
  --text-signature: 400 var(--fs-signature)/var(--lh-signature) var(--font-signature);

  /* 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;
  --fs-xxs: 10px; --lh-xxs: 14px;   /* Desktop/14 · text-xxs */

  /* 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);
  --text-xs-semibold: 600 var(--fs-xs)/var(--lh-xs) var(--font-body);   /* Figma Desktop/21 · text-xs-semibold = Mobile/23 · text-xs-semibold (Semibold 12/16) */
  --text-xxs: 400 var(--fs-xxs)/var(--lh-xxs) var(--font-body);
  /* Mobile-only styles (Figma Mobile/16–18) */
  --text-card-title: 600 16px/20px var(--font-display);      /* Desktop/20 · card-title (Video Card titles; not yet bound to a Typography / Responsive variable) */
  --text-card-title-sm: 600 14px/18px var(--font-display);   /* Mobile/16 · card-title-sm */
  /* Article text styles (Figma Desktop/16 lead, 17 body, 19 caption; Mobile/19–22) */
  --fs-article-lead: 22px; --lh-article-lead: 32px;
  --fs-article-body: 18px; --lh-article-body: 28px;
  --text-article-lead: 400 var(--fs-article-lead)/var(--lh-article-lead) var(--font-body);   /* Desktop/16 · Mobile/19 */
  --text-article-body: 400 var(--fs-article-body)/var(--lh-article-body) var(--font-body);   /* Desktop/17 · Mobile/20 */
  --text-article-link: var(--text-article-body);   /* Desktop/18 · Mobile/21 (underlined where used) */
  --text-article-caption: 400 13px/20px var(--font-body);   /* Desktop/19 · Mobile/22 */
  --text-label: 600 11px/14px var(--font-body);   /* Mobile/17 · label (UPPERCASE where used) */
  --text-row-title: 600 14px/18px var(--font-body);   /* Mobile/18 · row-title */

  /* Mobile text styles as fixed tokens (Figma Mobile/01–14). The global scale switches to these under 600 px; tablet components that use
     the Mobile variants in Figma reference these directly. */
  --text-mobile-9xl: 700 56px/56px var(--font-display);
  --text-mobile-8xl: 700 48px/48px var(--font-display);
  --text-mobile-7xl: 700 40px/44px var(--font-display);
  --text-mobile-6xl: 700 34px/38px var(--font-display);
  --text-mobile-5xl: 700 28px/32px var(--font-display);
  --text-mobile-2xl: 600 18px/24px var(--font-display);
  --text-mobile-base: 400 14px/20px var(--font-body);
  --text-mobile-xxs: 400 10px/14px var(--font-body);
  /* Card / Action Menu (1573:98) */
  --shadow-menu: 0 10px 28px rgba(0, 0, 0, 0.22);   /* Elevation/Menu */
  --blur-menu: 24px;   /* Elevation/Menu background blur 24 (was 12) */

  /* 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-100);   /* Figma badge/neutral-bg → neutral/100 (2026-10-25; was neutral/200, 4.36:1 with text/secondary) */
  --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(--complementary-purple-darkest);   /* Figma badge/staff-pick/foreground (Light) */

  --text-headline-card: var(--text-xl);
  --text-headline-large: var(--text-3xl);
  --text-headline-section: var(--text-3xl);
  --text-mobile-3xl: 700 22px/26px var(--font-display);   /* Figma Mobile/07 · text-3xl (section titles on tablet + phone) */
  --text-mobile-xs: 400 12px/16px var(--font-body);      /* Figma Mobile/13 · text-xs (eyebrows, Text Link) */
  --text-mobile-4xl: 700 24px/28px var(--font-display);   /* Figma Mobile/06 · text-4xl (Members title on tablet + phone) */
  --text-mobile-sm: 400 13px/18px var(--font-body);      /* Figma Mobile/12 · text-sm (accordion body, Sign in link) */
  --text-mobile-label: 600 11px/14px var(--font-body);   /* Figma Mobile/17 · label (App / List Header, +0.44 tracking) */
  --text-mobile-title: var(--text-mobile-5xl);   /* page title on tablet + phone (Search "Results for") = Mobile/05 text-5xl */
  --text-mobile-lg: 400 15px/22px var(--font-body);      /* Figma Mobile/10 · text-lg (App / Search Field) */
  --text-mobile-xl: 600 16px/20px var(--font-display);   /* Figma Mobile/09 · text-xl (story card titles, author name on tablet + phone) */
  --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"],
.theme-dark {   /* .theme-dark: scoped Dark preview (design-system page swatches) */
  --badge-neutral-bg: var(--surface-elevated);   /* Figma badge/neutral-bg (Dark) */
  --badge-neutral-border: var(--border-strong);
  --badge-neutral-text: var(--text-secondary);   /* on surface/elevated (badge/neutral-bg Dark) */
  --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);
  --image-placeholder: var(--surface-elevated);
  --surface-media-overlay: rgb(18 18 18 / 80%);   /* same as Light (media overlays stay dark) */
  --text-on-media: #FFFFFF;

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

  --text-primary: var(--neutral-50);   /* Figma text/primary (Dark) → neutral/50 */
  --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(--button-nav-primary-bg-hover);
  --button-primary-bg-pressed: var(--button-nav-primary-bg-pressed);
  --button-primary-border: var(--button-palette-primary-border-dark);   /* Figma → button-palette/primary-border-dark */
  --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);

  /* Button Secondary · Dark (Figma only partly tokenised this; filled in so text and background always contrast) */
  --button-secondary-bg: #36302B;
  --button-secondary-bg-hover: var(--neutral-650);
  --button-secondary-bg-pressed: var(--neutral-600);
  --button-secondary-border: #4A433E;
  --button-secondary-border-hover: var(--border-default);
  --button-secondary-border-pressed: var(--border-strong);

  --card-bg-default: var(--neutral-700);
  --card-bg-hover: var(--neutral-650);


  --card-text-secondary: var(--neutral-200);

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

  /* ---- Author card (Dark) ---- */
  --author-card-background: var(--surface-default);
  --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: color-mix(in srgb, var(--complementary-purple-dark) 0%, transparent);
  --card-staff-pick-tint-end: color-mix(in srgb, var(--complementary-purple-light) 40%, transparent);
  --card-staff-pick-shadow-soft: color-mix(in srgb, var(--complementary-purple-darkest) 10.196%, transparent);
  --card-staff-pick-shadow-tight: color-mix(in srgb, var(--complementary-purple-darkest) 12%, transparent);

  --card-focus-ring: var(--accent-default);
  --feedback-info: var(--neutral-0);   /* Figma feedback/info (Dark) #FFFFFF */
  --feedback-success: var(--semantic-success-on-dark);
  --feedback-error: var(--semantic-error-on-dark);
  --text-link: var(--semantic-link-on-dark);
  --text-link-action: var(--complementary-red-on-dark);
  --text-link-action-hover: var(--complementary-red-on-dark-hover);
  --avatar-sand: #5D5132;
  --avatar-clay: #5D4032;
  --avatar-sage: #435935;
  --avatar-sky: #324E5D;
  --avatar-lilac: #41325D;
  --avatar-rose: #5D323B;
  --avatar-gold: #5D5232;
  --filter-chip-background: var(--neutral-700);
  --filter-chip-border: var(--neutral-600);
}

/* ==========================================================================
   MOBILE type mode — Figma Mobile text styles (compact scale, 2026-10-22). The 'Typography / Responsive' variables still hold the
   old scale (Figma inconsistency); the styles are the source of truth.
   Applies under 600px (phones; tablet 600–1023 keeps the desktop styles and uses the Mobile component variants where Figma does),
   or force with <html data-type-mode="mobile">.
   ========================================================================== */
@media (max-width: 599px) {
  :root {
    --fs-9xl: 56px; --lh-9xl: 56px;
    --fs-8xl: 48px; --lh-8xl: 48px;
    --fs-7xl: 40px; --lh-7xl: 44px;
    --fs-6xl: 34px; --lh-6xl: 38px;
    --fs-5xl: 28px; --lh-5xl: 32px;
    --fs-4xl: 24px; --lh-4xl: 28px;
    --fs-3xl: 22px; --lh-3xl: 26px;
    --fs-2xl: 18px; --lh-2xl: 24px;
    --fs-xl: 16px; --lh-xl: 20px;
    --fs-lg: 15px; --lh-lg: 22px;
    --fs-base: 14px; --lh-base: 20px;
    --fs-sm: 13px; --lh-sm: 18px;
    --fs-xs: 12px; --lh-xs: 16px;
    --fs-signature: 26px; --lh-signature: normal;
    --fs-article-lead: 18px; --lh-article-lead: 28px;
    --fs-article-body: 16px; --lh-article-body: 26px;
  }
}
:root[data-type-mode="mobile"] {
  --fs-9xl: 56px; --lh-9xl: 56px;
  --fs-8xl: 48px; --lh-8xl: 48px;
  --fs-7xl: 40px; --lh-7xl: 44px;
  --fs-6xl: 34px; --lh-6xl: 38px;
  --fs-5xl: 28px; --lh-5xl: 32px;
  --fs-4xl: 24px; --lh-4xl: 28px;
  --fs-3xl: 22px; --lh-3xl: 26px;
  --fs-2xl: 18px; --lh-2xl: 24px;
  --fs-xl: 16px; --lh-xl: 20px;
  --fs-lg: 15px; --lh-lg: 22px;
  --fs-base: 14px; --lh-base: 20px;
  --fs-sm: 13px; --lh-sm: 18px;
  --fs-xs: 12px; --lh-xs: 16px;
  --fs-signature: 26px; --lh-signature: normal;
  --fs-article-lead: 18px; --lh-article-lead: 28px;
  --fs-article-body: 16px; --lh-article-body: 26px;
}