/*
  Design tokens — ported from the Claude Design handoff (design/untitled,
  Prototype.dc.html — the resolved, final artifact; Design Doc.dc.html /
  v2.dc.html are earlier exploration kept only where Prototype is silent,
  e.g. the spacing scale, which Prototype expresses only as inline
  literals). Dark theme only — this is a cinematic streaming client, not
  a light/dark-adaptive app.

  Breakpoints are documented here for reference but cannot be expressed
  as custom properties inside @media conditions (CSS limitation), so the
  literal values below are what actually appears in @media rules
  throughout the stylesheets:
    375px  — mobile
    768px  — tablet
    1440px — desktop
    1920px — large desktop
*/

:root {
  /* Surfaces — depth via background level, not borders/shadows */
  --color-bg: #060607;
  --color-bg-elevated: #0d0d0f;
  --color-surface: #141416;
  --color-bg-hover: #1c1c1f;
  --color-border: rgba(255, 255, 255, 0.09);

  /* Text */
  --color-text: #f4f4f3;
  --color-text-secondary: #9b9b9b;
  --color-text-tertiary: #5e5e60;

  /* Brand / accent — "Винный" (wine), the resolved option from the
     design's accent exploration */
  --color-accent: #9e2233;
  --color-accent-text: #e0616e;
  --color-accent-hover: #ec8890;

  /* Ratings & badges */
  --color-rating: #f5c518;
  --color-badge-4k: #8b5cf6;
  --color-badge-3d: #06b6d4;
  --color-badge-new: var(--color-accent);
  --color-success: #4fa07a;
  --color-error: #d4574e;

  /* Radii — only two steps; pills are literal 999px */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-pill: 999px;

  /* Shadows — used sparingly: hover-lift and popover menus only */
  --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.65);
  --shadow-menu: 0 8px 32px rgba(0, 0, 0, 0.5);

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;

  /* Typography — three families: display (headings/numerals), ui (body,
     the workhorse), mono (timecodes, eyebrow labels, badges) */
  --font-display: 'Unbounded', sans-serif;
  --font-sans: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --font-size-xs: 0.6875rem;  /* 11px — eyebrow labels, durations */
  --font-size-sm: 0.8125rem;  /* 13px — meta, secondary text */
  --font-size-md: 0.9375rem;  /* 15px — body */
  --font-size-lg: 1.25rem;    /* 20px — section/episode headings */
  --font-size-xl: 1.875rem;   /* 30px — title-page name */
  --font-size-2xl: 2.5rem;    /* 40px — large display numerals (404) */
  --font-size-hero: clamp(1.75rem, 4vw, 2.375rem); /* hero title, ~28–38px */

  /* Card sizing — desktop 200px, mobile 132px per the design's card spec */
  --card-width: 132px;
  --card-width-lg: 180px;

  /* Layering */
  --z-header: 100;
  --z-card-hover: 10;
  --z-overlay: 200;
  --z-modal: 300;

  /* Motion — hover changes tone/scale, never a bounce */
  --transition-fast: 140ms ease;
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  :root {
    --card-width: 160px;
    --card-width-lg: 210px;
  }
}

@media (min-width: 1440px) {
  :root {
    --card-width: 200px;
    --card-width-lg: 260px;
  }
}