/* ELI6 Movies — CSS variable foundation.
   All values set by applyTheme() in theme.js — this file just provides fallbacks. */

:root {
  /* Colors — Pulse dark defaults */
  --bg:         #0d0d12;
  --bg-alt:     #15151c;
  --surface:    #1a1a22;
  --surface-hi: #22222c;
  --fg:         #f0f0ff;
  --fg-muted:   #7a7a90;
  --fg-faint:   #4a4a5a;
  --border:     rgba(255,255,255,0.08);
  --scrim:      rgba(13,13,18,0.85);
  --elevated:   rgba(255,255,255,0.06);

  /* Accent */
  --accent:     #c8ff3a;
  --on-accent:  #0d0d12;

  /* Typography */
  --font-head:   'Space Grotesk', sans-serif;
  --font-body:   'Space Grotesk', sans-serif;
  --font-mono:   'JetBrains Mono', monospace;
  --head-weight: 700;
  --font-scale:  1;

  /* Radius */
  --r-sm:   8px;
  --r-md:   14px;
  --r-lg:   22px;
  --r-pill: 999px;

  /* Spacing / density (comfy defaults) */
  --row-gap:    40px;
  --pad-x:      48px;
  --poster-w:   180px;
  --poster-h:   270px;
  --poster-gap: 14px;
}

/* Smooth transitions when theme changes */
*, *::before, *::after {
  transition:
    background-color 200ms ease,
    color 200ms ease,
    border-color 200ms ease,
    box-shadow 200ms ease;
}

/* Disable transitions on forced fast switches */
.no-transition, .no-transition * { transition: none !important; }