:root {
  /* Surfaces */
  --color-bg: #06070a;
  --color-bg-elevated: #101319;
  --color-surface: #161a21;
  --color-surface-hover: #202531;
  --color-border: rgba(255, 255, 255, 0.07);
  --color-border-strong: rgba(255, 255, 255, 0.13);

  /* Text */
  --color-text: #f4f5f7;
  --color-text-secondary: #a6adba;
  --color-text-tertiary: #6c7280;

  /* Accent — warm gold, cinematic without leaning on a competitor's red */
  --color-accent: #d7a35c;
  --color-accent-strong: #ecc27f;
  --color-accent-contrast: #17130b;

  --color-rating: #f2c14e;
  --color-danger: #e5626a;
  --color-success: #57c785;

  /* Typography — fluid scale so headings scale smoothly instead of jumping at breakpoints */
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: clamp(1.125rem, 1rem + 0.6vw, 1.375rem);
  --fs-xl: clamp(1.375rem, 1.15rem + 1.1vw, 1.875rem);
  --fs-2xl: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem);
  --fs-3xl: clamp(2.25rem, 1.7rem + 2.8vw, 3.5rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  /* Radii */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* Motion */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 420ms;

  /* Shadows */
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.45);
  --shadow-card-hover: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(215, 163, 92, 0.18);
  --shadow-elevated: 0 24px 64px rgba(0, 0, 0, 0.6);

  /* Layout */
  --container-padding: clamp(1rem, 4vw, 3rem);
  --container-max: 1600px;
  /* Fluid card sizing — scales continuously with the viewport instead of
     jumping at breakpoints, so phones/tablets/desktop all get sensible poster
     sizes and a natural "peek" of the next card in each row. */
  --card-width: clamp(8.75rem, 34vw, 12.5rem);
  /* Deliberately a step down from --card-width: the calendar rail sits inside a
     day tab panel, so its cards read as secondary to the main content rails. */
  --card-width-sm: clamp(7rem, 27vw, 9.75rem);
  /* Continue Watching's horizontal rail card (poster + text side by side)
     needs more width than a portrait card to fit its body legibly. */
  --card-width-wide: clamp(15rem, 62vw, 19rem);
  /* Min column width for the Explore responsive grid — `auto-fill` derives the
     column count from this, so the grid reflows without breakpoints. */
  --ex-card-min: clamp(7rem, 30vw, 10.5rem);
  /* Bumped from 5.5rem: the dock now stacks a label under every icon
     (`.bn-label` reveal in components.css), same taller-dock adjustment
     Theme 2 ("Nova") already made for the same reason. */
  --bottom-nav-clearance: calc(5.75rem + env(safe-area-inset-bottom));

  /* Hero carousel card: small side inset + rounded corners, scaled fluidly. */
  --hero-inset: clamp(0.5rem, 1.6vw, 1rem);
  --hero-radius: clamp(0.875rem, 3vw, 1.5rem);
  /* Room reserved at the bottom of a slide so copy never collides with dots. */
  --hero-dots-space: var(--space-4);

  /* Minimum comfortable touch target (~44px). Applied to every interactive
     control on coarse pointers so the UI stays thumb-friendly in PWA/TWA. */
  --tap-min: 2.75rem;

  /* Z-index scale */
  --z-nav: 100;
  --z-overlay: 200;
  --z-toast: 300;
}

/* Card widths are fluid via clamp() above — no per-breakpoint overrides needed. */