/* ============================================================
   Theme 2 — "Nova": token overrides only.
   Scoped under [data-theme="nova"] so Theme 1 ("Classic", selected via
   [data-theme="classic"]) is completely untouched. Nova — not Classic —
   is what a fresh visitor actually gets: see state/theme.js's read()
   fallback and index.html's boot script, both of which default to
   'nova' when nothing is stored yet. Values are pulled from project_A's
   shipped design
   system (css/tokens.css there) — a violet -> cyan duotone,
   Material-You-adjacent "squircle" language. Component CSS in this
   project already reads these custom properties almost everywhere,
   so this file alone re-colors/re-shapes most of the app; see
   theme-nova.css for the handful of structural overrides token
   values can't reach (nav position, hero deck, bottom-nav labels,
   hardcoded accent-tinted rgba() values, etc). ---------------- */
:root[data-theme='nova'] {
  --color-bg: #08070f;
  --color-bg-elevated: #0e0b18;
  --color-surface: #17152c;
  --color-surface-hover: #211c40;
  --color-surface-raised: #1c1836;
  --color-border: rgba(167, 139, 250, 0.14);
  --color-border-strong: rgba(178, 154, 250, 0.3);
  --color-border-hairline: rgba(167, 139, 250, 0.08);

  --color-text: #f5f2fc;
  --color-text-secondary: #b8b1d6;
  --color-text-tertiary: #7d7799;

  --color-accent: #8b5cf6;
  --color-accent-strong: #a78bfa;
  --color-accent-2: #22d3ee;
  --color-accent-pink: #f472b6;
  /* Pure black — the icon/text that sits on `--gradient-accent`'s fill
     (Watch Now, active pills/tabs, etc.), per explicit request to read as
     unambiguously black rather than near-black. */
  --color-accent-contrast: #000000;
  /* Darkened ~22% per channel from the original #8b5cf6/#a78bfa/#22d3ee
     stops, per explicit request — same violet-to-cyan diagonal duotone,
     just a deeper fill so "active" buttons/pills read less bright. */
  --gradient-accent: linear-gradient(135deg, #6c48c0 0%, #826cc3 50%, #1ba9be 100%);
  --gradient-accent-soft: linear-gradient(135deg, rgba(139, 92, 246, 0.16) 0%, rgba(167, 139, 250, 0.1) 50%, rgba(34, 211, 238, 0.08) 100%);
  --gradient-surface-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 45%);

  --color-rating: #fbbf24;
  --color-danger: #fb7185;
  --color-success: #4ee0a8;

  --fs-lg: clamp(1.125rem, 1rem + 0.55vw, 1.375rem);
  --fs-xl: clamp(1.3125rem, 1.1rem + 1vw, 1.75rem);
  --fs-2xl: clamp(1.625rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-3xl: clamp(1.875rem, 1.5rem + 2vw, 2.75rem);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;

  --ease-standard: cubic-bezier(0.34, 1.32, 0.64, 1);
  --ease-flat: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 160ms;
  --duration-base: 280ms;
  --duration-slow: 460ms;

  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 24px rgba(3, 2, 14, 0.55);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 22px 46px rgba(3, 2, 14, 0.65), 0 0 0 1px rgba(167, 139, 250, 0.35), 0 0 26px rgba(139, 92, 246, 0.22);
  --shadow-elevated: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 28px 68px rgba(3, 2, 14, 0.7), 0 0 0 1px rgba(167, 139, 250, 0.08);
  --shadow-glow: 0 8px 22px rgba(139, 92, 246, 0.4), 0 0 14px rgba(34, 211, 238, 0.14);
  --shadow-glow-soft: 0 4px 16px rgba(139, 92, 246, 0.22);
  --shadow-inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.05);

  --card-width: clamp(7.75rem, 30vw, 10.75rem);
  --card-width-sm: clamp(6.5rem, 24vw, 8.5rem);
  --ex-card-min: clamp(6.75rem, 28vw, 9.5rem);
  --bottom-nav-clearance: calc(5.75rem + env(safe-area-inset-bottom));

  --container-max: 1600px;
}

@media (min-width: 1920px) {
  :root[data-theme='nova'] { --container-max: 1760px; }
}