/* Movara design tokens — single source of truth.
   Theme A (cinematic red) is the default; B and C are opt-in via data-theme on <html>. */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn-v2.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root,
:root[data-theme="a"] {
  /* surfaces: 0 = page, higher = closer to the viewer */
  --bg: #0b0b0f;
  --surface-1: #131318;
  --surface-2: #1b1b22;
  --surface-3: #24242d;
  --overlay: rgba(5, 5, 8, .72);

  --text-1: #f5f5f7;
  --text-2: #a1a1aa;
  --text-3: #71717a;

  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  --accent: #e11d48;
  --accent-hover: #f43f5e;
  --accent-soft: rgba(225, 29, 72, .14);
  --accent-text: #fb7185;
  --on-accent: #ffffff;

  color-scheme: dark;
}

:root[data-theme="b"] {
  --bg: #0a0f1c;
  --surface-1: #111827;
  --surface-2: #172036;
  --surface-3: #1f2a44;
  --overlay: rgba(4, 8, 18, .72);
  --text-1: #f1f5f9;
  --text-2: #94a3b8;
  --text-3: #64748b;
  --border: rgba(148, 163, 184, .12);
  --border-strong: rgba(148, 163, 184, .24);
  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-soft: rgba(59, 130, 246, .15);
  --accent-text: #60a5fa;
  --on-accent: #ffffff;
}

:root[data-theme="c"] {
  --bg: #0e0e10;
  --surface-1: #161618;
  --surface-2: #1e1e21;
  --surface-3: #27272b;
  --overlay: rgba(6, 6, 7, .74);
  --text-1: #fafafa;
  --text-2: #a1a1aa;
  --text-3: #71717a;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);
  --accent: #f5c518;
  --accent-hover: #ffd43b;
  --accent-soft: rgba(245, 197, 24, .13);
  --accent-text: #f5c518;
  --on-accent: #1a1400;
}

:root {
  /* semantic colors (theme independent) */
  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, .14);
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, .14);
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, .14);
  --imdb: #f5c518;

  /* type */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-22: 1.375rem;
  --fs-28: 1.75rem;
  --fs-36: 2.25rem;
  --fs-48: 3rem;
  --lh-body: 1.75;
  --lh-tight: 1.3;

  /* spacing (4px grid) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* shape */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-full: 999px;

  /* layout */
  --container: 1320px;
  --gutter: 16px;
  --header-h: 64px;
  --control-h: 44px;
  --control-h-sm: 36px;

  /* z-index scale */
  --z-header: 30;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* motion */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1280px) { :root { --gutter: 40px; } }