/* ArashMovie design tokens — cinematic charcoal, iPhone pink accent.
   Shared visual language for Customer Web/PWA.
   html[data-theme] is the resolved appearance (dark|light). System mode is applied in JS. */
:root,
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #14161c;
  --bg-elevated: #1a1d24;
  --bg-glow-1: #1c2230;
  --bg-glow-2: #181c24;
  --surface: #1e222b;
  --surface-solid: #1e222b;
  --surface-elevated: #262b36;
  --surface-border: #323846;
  --border: #323846;
  --text: #ffffff;
  --text-primary: #ffffff;
  --text-secondary: #f8f8f8;
  --text-dim: #f8f8f8;
  --text-faint: #fafafa;
  --muted: #f8f8f8;
  --text-muted: #f8f8f8;
  --icon: #ffffff;
  --on-accent: #1a0f17;
  --s0: #14161c;
  --s1: #1e222b;
  --s2: #262b36;
  --ink: #ffffff;
  --ink-2: #f8f8f8;
  --ink-3: #fafafa;
  --hairline: rgba(255, 255, 255, 0.07);
  --accent: #ff6fb1;
  --accent-hover: #ff8ec7;
  --accent-muted: rgba(255, 111, 177, 0.22);
  --accent-soft: rgba(255, 111, 177, 0.42);
  --accent-active: #ffb3d8;
  --accent-2: #ff6fb1;
  --accent-strong: #ff8ec7;
  --accent-gradient: linear-gradient(180deg, rgba(255, 179, 216, 0.62) 0%, rgba(255, 111, 177, 0.26) 100%);
  --movie-gradient: linear-gradient(135deg, #5b9fd4 0%, #3d7eb8 100%);
  --series-gradient: linear-gradient(135deg, #c47a9a 0%, #d4b45a 100%);
  --gold: #d4b45a;
  --success: #3dba7e;
  --warn: #d4b45a;
  --warning: #d4b45a;
  --danger: #e06b7c;
  --error: #e06b7c;
  --info: #5b9fd4;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --shadow-1: 0 4px 16px rgba(0, 0, 0, 0.28);
  --shadow-2: 0 10px 28px rgba(0, 0, 0, 0.34);
  --motion-fast: 0.12s ease;
  --motion-normal: 0.2s ease;
  --font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --text-sm: 12px;
  --text-md: 14px;
  --text-lg: 18px;
  --line: 1.5;
  /* Liquid-glass controls. Content cards stay opaque. */
  --glass-bg: rgba(22, 24, 32, 0.52);
  --glass-bg-strong: rgba(14, 16, 24, 0.82);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-highlight: rgba(255, 218, 238, 0.34);
  --glass-shadow: 0 10px 28px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 218, 238, 0.22);
  --glass-blur: 16px;
  --glass-text: #ffffff;
  --glass-active: rgba(255, 111, 177, 0.36);
  --nav-glass: rgba(8, 10, 16, 0.92);
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f4f6;
  --bg-elevated: #ffffff;
  --bg-glow-1: #e8eaef;
  --bg-glow-2: #e6e9ef;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-elevated: #f7f8fa;
  --surface-border: #d8dce4;
  --border: #d8dce4;
  --text: #000000;
  --text-primary: #000000;
  --text-secondary: #111111;
  --text-dim: #111111;
  --text-faint: #0a0a0a;
  --muted: #111111;
  --text-muted: #111111;
  --icon: #000000;
  --on-accent: #3a1028;
  --s0: #f3f4f6;
  --s1: #ffffff;
  --s2: #f7f8fa;
  --ink: #000000;
  --ink-2: #111111;
  --ink-3: #0a0a0a;
  --hairline: rgba(28, 33, 48, 0.14);
  --accent: #ff6fb1;
  --accent-hover: #e85a9c;
  --accent-muted: rgba(255, 111, 177, 0.18);
  --accent-soft: rgba(255, 111, 177, 0.28);
  --accent-active: #ff8ec7;
  --accent-2: #ff6fb1;
  --accent-strong: #e14d94;
  --accent-gradient: linear-gradient(180deg, rgba(255, 179, 216, 0.7) 0%, rgba(255, 111, 177, 0.28) 100%);
  --success: #1f8a58;
  --warn: #8a7310;
  --warning: #8a7310;
  --danger: #c43b54;
  --error: #c43b54;
  --info: #2d6fa0;
  --shadow-1: 0 4px 16px rgba(28, 33, 48, 0.08);
  --shadow-2: 0 10px 28px rgba(28, 33, 48, 0.1);
  --glass-bg: rgba(255, 255, 255, 0.64);
  --glass-bg-strong: rgba(255, 255, 255, 0.86);
  --glass-border: rgba(28, 33, 48, 0.16);
  --glass-highlight: rgba(255, 218, 238, 0.96);
  --glass-shadow: 0 6px 18px rgba(28, 33, 48, 0.10), inset 0 1px 0 rgba(255, 218, 238, 0.9);
  --glass-blur: 14px;
  --glass-text: #000000;
  --glass-active: rgba(255, 111, 177, 0.24);
  --nav-glass: rgba(248, 246, 250, 0.94);
}