/* ============================================================
   CineRoom — Design Tokens
   "Less interface, more cinema."
   Themes: dark (primary) / light — switched via [data-theme]
   ============================================================ */

:root {
  /* Typography */
  --font-sans: "Vazirmatn", "Vazirmatn FD", Tahoma, -apple-system, "Segoe UI", sans-serif;

  --text-display: 2.75rem;   /* 44px */
  --text-h1: 2rem;           /* 32px */
  --text-h2: 1.5rem;         /* 24px */
  --text-h3: 1.1875rem;      /* 19px */
  --text-body: 0.9375rem;    /* 15px */
  --text-body-lg: 1.0625rem; /* 17px */
  --text-caption: 0.8125rem; /* 13px */
  --text-meta: 0.75rem;      /* 12px */

  --lh-tight: 1.35;
  --lh-body: 1.85;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Radius */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

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

  /* Z-index */
  --z-header: 40;
  --z-drawer: 60;
  --z-sheet: 70;
  --z-modal: 80;
  --z-toast: 90;

  /* Layout */
  --content-max: 1200px;
  --header-h: 68px;
  --bottomnav-h: 68px;
}

/* ------------------------------------------------------------
   DARK THEME (primary — private cinema)
   ------------------------------------------------------------ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #121012;
  --surface: #1a1618;
  --surface-elevated: #221d20;
  --surface-modal: #262023;
  --input-bg: #1d191b;
  --sidebar-bg: #171316;

  --primary: #e5484d;
  --primary-hover: #ea5c60;
  --primary-active: #d13b40;
  --primary-soft: rgba(229, 72, 77, 0.13);
  --primary-contrast: #ffffff;
  --on-soft: #f0888c;

  --text-primary: #f4eff0;
  --text-secondary: #b3a8ab;
  --text-muted: #7d7276;

  --border: rgba(244, 239, 240, 0.09);
  --border-strong: rgba(244, 239, 240, 0.16);

  --success: #46c78c;
  --success-soft: rgba(70, 199, 140, 0.14);
  --warning: #e8a33d;
  --warning-soft: rgba(232, 163, 61, 0.14);
  --error: #f2555a;
  --error-soft: rgba(242, 85, 90, 0.14);
  --info: #6aa6f5;
  --info-soft: rgba(106, 166, 245, 0.14);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 24px -6px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 16px 48px -12px rgba(0, 0, 0, 0.65);
  --shadow-glow: 0 0 0 1px rgba(229, 72, 77, 0.35), 0 8px 32px -8px rgba(229, 72, 77, 0.35);

  --overlay: rgba(8, 6, 7, 0.66);
  --poster-fallback: linear-gradient(150deg, #33262a 0%, #1a1618 60%, #241a1e 100%);
}

/* ------------------------------------------------------------
   LIGHT THEME (warm lobby, same architecture)
   ------------------------------------------------------------ */
[data-theme="light"] {
  color-scheme: light;

  --bg: #faf7f5;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --surface-modal: #ffffff;
  --input-bg: #f6f1ee;
  --sidebar-bg: #f4efeb;

  --primary: #b62030;
  --primary-hover: #c62c3c;
  --primary-active: #9c1a29;
  --primary-soft: rgba(182, 32, 48, 0.09);
  --primary-contrast: #ffffff;
  --on-soft: #9c1a29;

  --text-primary: #241d20;
  --text-secondary: #6d6165;
  --text-muted: #9a8d91;

  --border: rgba(36, 29, 32, 0.1);
  --border-strong: rgba(36, 29, 32, 0.2);

  --success: #177245;
  --success-soft: rgba(23, 114, 69, 0.1);
  --warning: #96650f;
  --warning-soft: rgba(150, 101, 15, 0.1);
  --error: #c02633;
  --error-soft: rgba(192, 38, 51, 0.09);
  --info: #2b62b0;
  --info-soft: rgba(43, 98, 176, 0.09);

  --shadow-sm: 0 1px 2px rgba(60, 40, 45, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(60, 40, 45, 0.14);
  --shadow-lg: 0 16px 48px -16px rgba(60, 40, 45, 0.22);
  --shadow-glow: 0 0 0 1px rgba(182, 32, 48, 0.25), 0 8px 32px -10px rgba(182, 32, 48, 0.3);

  --overlay: rgba(46, 34, 38, 0.45);
  --poster-fallback: linear-gradient(150deg, #ecd9dc 0%, #d9c2c6 55%, #c8a2a8 100%);
}