/* ============================================
   NBA Region IX — Design Tokens
   Source of truth: ../_design-system.md (v10)
   ============================================ */

:root {
  /* ---------- Color: Wine (primary background family, 700-850) ---------- */
  /* Anchored on NBA national reference (#320019). Cards now drop BELOW the page color
     for real contrast — page is wine-800, cards are wine-850 (darker pocket).
     wine-775 is retained for gradient stops, overlay accents, and stripe pairings only;
     never as a flat surface against wine-800. */
  --wine-700: #4D0027;  /* border default, decorative accents */
  --wine-775: #3D001F;  /* gradient / overlay / stripe accent only — NOT a flat surface against 800 */
  --wine-800: #320019;  /* NBA reference. Dark-mode page background, light-mode authority */
  --wine-850: #2B0015;  /* dark-mode card surface — sits deeper than page wine-800 */

  /* ---------- Color: Crimson (accent / interactive family, 400-800) ---------- */
  --crimson-400: #D14C4A;
  --crimson-500: #A11D33;
  --crimson-600: #871427;
  --crimson-700: #6E0F1F;
  --crimson-775: #5F0B19;  /* held for warm accent surface lift */
  --crimson-800: #570A17;  /* accent surface, gradient stops */

  /* ---------- Color: Tan (25-400) ---------- */
  --tan-25: #FDF9ED;
  --tan-50: #FBF4EA;
  --tan-100: #F5E5C9;
  --tan-200: #EDD0A0;
  --tan-300: #E7B37E;
  --tan-400: #D49658;

  /* ---------- Color: Warm Grey (full ramp) ---------- */
  --grey-50: #F7F3F5;
  --grey-100: #EEEAEC;
  --grey-200: #DDD9DC;
  --grey-300: #C2BEC1;
  --grey-400: #A3A0A2;
  --grey-500: #84818A;
  --grey-600: #5F5C61;
  --grey-700: #454247;
  --grey-800: #2D2A2E;
  --grey-900: #1B181C;
  --grey-950: #0F0D11;

  /* ---------- Color: Onyx (alternate dark surface) ---------- */
  --onyx-600: #3A4757;
  --onyx-700: #2A3744;
  --onyx-800: #1F2A36;
  --onyx-900: #141F29;
  --onyx-950: #0A1218;

  /* ---------- Semantic ---------- */
  --semantic-success: #3D7A4D;
  --semantic-warning: #AC8838;
  --semantic-error: #B83232;
  --semantic-info: #3B5773;

  /* ---------- Typography ---------- */
  --font-serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Monaco, monospace;

  /* Type scale */
  --type-display: 72px;
  --type-h1: 56px;
  --type-h2: 36px;
  --type-h3: 24px;
  --type-h4: 20px;
  --type-body-lg: 18px;
  --type-body: 16px;
  --type-body-sm: 14px;
  --type-caption: 12px;
  --type-button: 14px;
  --type-mono: 13px;

  /* Line heights */
  --lh-display: 80px;
  --lh-h1: 64px;
  --lh-h2: 44px;
  --lh-h3: 32px;
  --lh-h4: 28px;
  --lh-body-lg: 28px;
  --lh-body: 26px;
  --lh-body-sm: 22px;
  --lh-caption: 18px;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ---------- Layout ---------- */
  --container-max: 1280px;
  --container-narrow: 720px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 200ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
}

/* ============================================
   Single-Mode Treatment (v11)
   Per Diallo: no automatic light/dark switching. The site commits to wine as the
   dominant background family across all pages. Individual sections can be light
   by design (e.g., the affiliate marquee on a white band) but those are local
   section choices, not a page-level mode flip.
   Three-level depth system:
     page = wine-800, card = wine-850 (deeper pocket), inset = wine-800 (lifts to page level).
   wine-775 stays in the palette for gradient stops, overlay accents, and stripe pairings —
   never a flat surface against wine-800 (perceptual distance is too small).
   Crimson is the active/accent family for CTAs, links, hover states, and warm accent surfaces.
   Tan is the warm accent for eyebrows, lockup IX, and gold moments.
   ============================================ */
:root {
  --bg-page: var(--wine-800);
  --bg-surface: var(--wine-850);       /* cards sit DARKER than page — real pocket */
  --bg-surface-tint: var(--wine-800);  /* inset element on a card lifts back to page level */
  --bg-authority: var(--wine-800);
  --bg-accent: var(--crimson-800);     /* warm accent surface — sponsor sections, callouts */
  --bg-alt: var(--onyx-800);
  --bg-light: #FFFFFF;                 /* local light band (affiliate marquee, etc.) */
  --bg-light-tint: var(--tan-25);      /* cream variant for warm light sections */

  --border-default: var(--wine-700);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);
  --border-emphasis: var(--crimson-700);  /* hover/emphasis introduces the warm shift */

  --text-primary: var(--grey-50);
  --text-secondary: var(--grey-200);
  --text-muted: var(--grey-400);
  --text-warm-accent: var(--tan-200);
  --text-on-authority: var(--grey-50);
  --text-on-accent: var(--grey-50);
  --text-on-light: var(--grey-900);    /* text on local light bands */

  --cta-primary-bg: var(--crimson-500);
  --cta-primary-hover: var(--crimson-600);
  --cta-primary-text: #FFFFFF;
  --cta-secondary-text: var(--tan-200);
  --cta-sponsor-bg: var(--crimson-500);
  --cta-sponsor-hover: var(--crimson-600);

  --link: var(--tan-300);
  --link-hover: var(--tan-200);

  /* Lockup-specific */
  --lockup-sep: rgba(237, 208, 160, 0.35);  /* tan-200 @ 35% */
  --lockup-region: var(--tan-200);
}