/* =====================================================================
   Reel · design tokens
   TV and film streaming. Light is "Matinee"; dark is "Late show".
   --crim is the one accent (play, buttons, links, progress, the lit words).
   Classification badges use their own fixed colours (G, PG, M, MA15+, R18+) in both modes, always with the consumer advice in words.
   The screen (billboards, posters) is always near-black.
   ===================================================================== */
:root {
  color-scheme: light;
  --paper: #f8f6f2;
  --card: #ffffff;
  --well: #efebe4;
  --line: #ddd8cf;
  --ink: #141215;
  --ink-2: #3a373c;
  --muted: #5e5a55;
  --crim: #a50f28;
  --crim-2: #860c20;
  --on-crim: #ffffff;
  --crim-soft: #fbe2e5;
  --screen: #0c0b0d;
  --focus: #a50f28;
  --rate-g: #2f7d32;
  --rate-pg: #f5c400;
  --rate-m: #1565c0;
  --rate-ma: #c62828;
  --rate-r: #121212;
  --shadow-card: 0 1px 2px rgba(20, 18, 21, 0.05), 0 16px 34px -24px rgba(20, 18, 21, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(20, 18, 21, 0.55);

  --display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;

  --fs-h1: clamp(42px, 6vw, 92px);
  --fs-h2: clamp(30px, 3.6vw, 52px);
  --fs-h3: 21px;
  --fs-lead: clamp(17.5px, 1.35vw, 20.5px);
  --fs-body: 16.5px;
  --fs-small: 15px;
  --fs-label: 12px;

  --wrap: 1200px;
  --gutter: max(20px, 4vw);
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 40px; --s-7: 64px; --s-8: 104px;

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 18px;
  --r-pill: 999px;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --snap: cubic-bezier(0.34, 1.56, 0.64, 1);
  --d-fast: 150ms;
  --d: 300ms;
  --d-slow: 900ms;
}

/* ---------- Late show ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #0c0b0d;
    --card: #161417;
    --well: #121013;
    --line: #2b282d;
    --ink: #f3f0ec;
    --ink-2: #d3cec8;
    --muted: #a8a29b;
    --crim: #ff7a8a;
    --crim-2: #ff9eaa;
    --on-crim: #33040b;
    --crim-soft: #2d171b;
    --screen: #050405;
    --focus: #ff7a8a;
    --rate-g: #2f7d32;
    --rate-pg: #f5c400;
    --rate-m: #1565c0;
    --rate-ma: #c62828;
    --rate-r: #000000;
    --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
    --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0c0b0d;
  --card: #161417;
  --well: #121013;
  --line: #2b282d;
  --ink: #f3f0ec;
  --ink-2: #d3cec8;
  --muted: #a8a29b;
  --crim: #ff7a8a;
  --crim-2: #ff9eaa;
  --on-crim: #33040b;
  --crim-soft: #2d171b;
  --screen: #050405;
  --focus: #ff7a8a;
  --rate-g: #2f7d32;
  --rate-pg: #f5c400;
  --rate-m: #1565c0;
  --rate-ma: #c62828;
  --rate-r: #000000;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 16px 34px -20px rgba(0, 0, 0, 0.85);
  --shadow-lift: 0 30px 60px -26px rgba(0, 0, 0, 0.9);
}