/* ==========================================================================
   Design Tokens — NowShowing
   ========================================================================== */

:root {
  /* Color — dark (default) */
  --bg: #0a0a0d;
  --bg-elevated: #121216;
  --bg-elevated-2: #1a1a20;
  --surface: #16161c;
  --surface-hover: #1e1e26;
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.16);

  --text: #f2f2f5;
  --text-muted: #9797a8;
  --text-faint: #5c5c6b;

  --accent: #e0313f;
  --accent-dim: #b32530;
  --accent-soft: rgba(224, 49, 63, 0.14);
  --accent-ring: rgba(224, 49, 63, 0.45);

  --success: #23c67a;
  --warning: #e2a53a;

  --overlay: rgba(6, 6, 8, 0.86);
  --scrim: linear-gradient(180deg, rgba(10, 10, 13, 0) 0%, rgba(10, 10, 13, 0.9) 100%);

  /* Typography */
  --font-display: 'Bebas Neue', 'Arial Narrow', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.9375rem;
  --fs-md: 1.05rem;
  --fs-lg: 1.35rem;
  --fs-xl: 1.9rem;
  --fs-2xl: clamp(2.2rem, 5.5vw, 3.6rem);
  --fs-3xl: clamp(2.8rem, 7vw, 5rem);

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

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

  /* Shadow */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 140ms;
  --dur-base: 220ms;
  --dur-slow: 400ms;

  /* Layout */
  --container-max: 1560px;
  --nav-h: 64px;
}

:root[data-theme='light'] {
  --bg: #f5f5f7;
  --bg-elevated: #ffffff;
  --bg-elevated-2: #eeeef1;
  --surface: #ffffff;
  --surface-hover: #f0f0f3;
  --border: rgba(10, 10, 20, 0.08);
  --border-strong: rgba(10, 10, 20, 0.16);

  --text: #16161a;
  --text-muted: #63636f;
  --text-faint: #9a9aa5;

  --accent-soft: rgba(224, 49, 63, 0.09);
  --overlay: rgba(20, 20, 24, 0.7);
  --scrim: linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 0.92) 100%);

  --shadow-sm: 0 2px 8px rgba(20, 20, 30, 0.08);
  --shadow-md: 0 12px 32px rgba(20, 20, 30, 0.12);
  --shadow-lg: 0 24px 60px rgba(20, 20, 30, 0.16);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --bg: #f5f5f7;
    --bg-elevated: #ffffff;
    --bg-elevated-2: #eeeef1;
    --surface: #ffffff;
    --surface-hover: #f0f0f3;
    --border: rgba(10, 10, 20, 0.08);
    --border-strong: rgba(10, 10, 20, 0.16);
    --text: #16161a;
    --text-muted: #63636f;
    --text-faint: #9a9aa5;
    --accent-soft: rgba(224, 49, 63, 0.09);
    --overlay: rgba(20, 20, 24, 0.7);
    --scrim: linear-gradient(180deg, rgba(245, 245, 247, 0) 0%, rgba(245, 245, 247, 0.92) 100%);
    --shadow-sm: 0 2px 8px rgba(20, 20, 30, 0.08);
    --shadow-md: 0 12px 32px rgba(20, 20, 30, 0.12);
    --shadow-lg: 0 24px 60px rgba(20, 20, 30, 0.16);
  }
}