/* ==========================================================================
   CineShell — Design Tokens
   تنها فایلی که «مقدار خام» در آن مجاز است. بقیه‌ی سیستم فقط از این توکن‌ها
   استفاده می‌کند؛ برای تم‌کردن (white-label) فقط همین فایل عوض می‌شود.
   ========================================================================== */

:root {
  /* ---------- BRAND ------------------------------------------------------
     رنگ برند از سایت مبدأ استخراج شد (#ff437e) و به یک «رمپ» کامل
     ارتقا پیدا کرد تا گرادیان، گلو و حالت‌های تعاملی قابل ساخت باشند. */
  --brand-50:  #ffe9f0;
  --brand-100: #ffc9db;
  --brand-200: #ff9fbe;
  --brand-300: #ff75a1;
  --brand-400: #ff437e;   /* ← رنگ اصلی مبدأ */
  --brand-500: #f22a6b;
  --brand-600: #d4185a;
  --brand-700: #a80f47;
  --brand: var(--brand-400);
  --brand-ink: #ffffff;
  /* پیش‌فرضِ RGBِ برند و لهجه — لایه‌ی مشتق این‌ها را بازنویسی می‌کند.
     تعریفشان این‌جا یعنی حتی اگر config نیامد، هیچ رنگی نامعتبر نمی‌شود. */
  --brand-rgb: 255 67 126;
  --accent-rgb: 139 92 246;

  /* طلاییِ اشتراک — مثل --danger یک رنگِ **معنایی** است، نه برند: با عوض‌شدنِ
     رنگِ برند تغییر نمی‌کند تا نشانه‌ی «ویژه» جای خودش را نگه دارد. */
  --vip-1: #ffd76e;
  --vip-2: #f5b544;
  --vip-3: #e39312;
  --vip-ink: #1a1206;

  --accent-violet: #8b5cf6;
  --accent-cyan:   #22d3ee;

  /* گرادیان برند — امضای بصری پوسته */
  --brand-gradient: linear-gradient(135deg, var(--brand-400) 0%, var(--brand-500) 45%, var(--accent-violet) 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgb(var(--brand-rgb) / .18), rgb(var(--accent-rgb) / .18));
  --brand-glow: 0 0 0 1px rgb(var(--brand-rgb) / .35), 0 8px 30px -8px rgb(var(--brand-rgb) / .55);

  /* ---------- SEMANTIC / STATUS ---------- */
  --success: #34c36d;
  --warning: #f5b544;
  --danger:  #ed6167;   /* هرگز تم نمی‌شود — «حذف» باید همیشه قرمز بماند */
  --imdb:    #f5c518;

  /* ---------- SURFACES (لایه‌بندی عمق) ----------
     مبدأ: #030303 / #10141a / #141821 / #161d26 / #212a39
     اینجا با یک ته‌مایه‌ی بنفش-آبی بازتنظیم شد تا عمق واقعی حس شود. */
  --bg:          #050609;
  --surface-1:   #0b0e14;
  --surface-2:   #111621;
  --surface-3:   #18202e;
  --surface-4:   #212b3d;
  --surface-glass:      rgb(12 15 22 / .62);
  --surface-glass-hi:   rgb(20 25 36 / .78);
  --overlay-scrim:      rgb(3 4 7 / .74);

  --line:        rgb(255 255 255 / .08);
  --line-strong: rgb(255 255 255 / .16);
  --line-brand:  rgb(var(--brand-rgb) / .45);

  /* ---------- TEXT ---------- */
  --text:      #f4f6fa;
  --text-2:    rgb(244 246 250 / .74);
  --text-3:    rgb(244 246 250 / .52);
  --text-4:    rgb(244 246 250 / .34);

  /* ---------- TYPOGRAPHY ---------- */
  --font-fa: "Vazirmatn", "IRANYekan", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Outfit", "Vazirmatn", "Segoe UI", sans-serif;
  --font-num: "Outfit", var(--font-fa);

  --fs-2xs: .6875rem;  /* 11 */
  --fs-xs:  .75rem;    /* 12 */
  --fs-sm:  .8125rem;  /* 13 — سایز پایه‌ی مبدأ */
  --fs-md:  .875rem;   /* 14 */
  --fs-base: .9375rem; /* 15 */
  --fs-lg:  1.0625rem; /* 17 */
  --fs-xl:  1.25rem;   /* 20 */
  --fs-2xl: 1.5rem;    /* 24 */
  --fs-3xl: 2rem;      /* 32 */
  --fs-4xl: 2.75rem;   /* 44 */
  --fs-5xl: 3.75rem;   /* 60 */

  --lh-tight: 1.15;
  --lh-snug: 1.4;
  --lh-body: 1.85;

  /* ---------- SPACE (۴ پایه) ---------- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  /* ---------- RADIUS (مبدأ: 10/15/20) ---------- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;

  /* ---------- ELEVATION ---------- */
  --sh-1: 0 1px 2px rgb(0 0 0 / .4);
  --sh-2: 0 4px 14px -4px rgb(0 0 0 / .55);
  --sh-3: 0 14px 34px -10px rgb(0 0 0 / .68);
  --sh-4: 0 28px 64px -16px rgb(0 0 0 / .78);
  --sh-inset-hi: inset 0 1px 0 rgb(255 255 255 / .07);

  /* ---------- MOTION ----------
     مبدأ فقط «all .2s» خطی داشت (۱۱۱ اعلان، صفر keyframe).
     اینجا یک مقیاس زمانی + منحنی‌های واقعی تعریف می‌شود. */
  --d-1: 120ms;
  --d-2: 200ms;
  --d-3: 320ms;
  --d-4: 480ms;
  --d-5: 720ms;
  --d-6: 1100ms;

  --e-out:    cubic-bezier(.22, 1, .36, 1);      /* خروج نرم — پیش‌فرض UI */
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);   /* کمی overshoot */
  --e-swift:  cubic-bezier(.4, 0, .2, 1);

  --t-fast:  var(--d-1) var(--e-swift);
  --t-base:  var(--d-2) var(--e-out);
  --t-slow:  var(--d-4) var(--e-out);

  /* ---------- LAYOUT ---------- */
  --container: 1440px;
  --gutter: var(--sp-5);
  /* پیش‌فرض‌ها؛ لایه‌ی derive این دو را محاسبه می‌کند */
  --on-brand: #ffffff;
  --on-media: #ffffff;

  --header-h: 76px;
  --mobilenav-h: 74px;

  /* نسبت‌های استخراج‌شده از مبدأ */
  --ratio-poster: 230 / 345;   /* پوستر عمودی */
  --ratio-cover:  325 / 185;   /* کاور افقی سریال */
  --ratio-mini:   190 / 102;   /* ریزپوستر بنر (≈1.86) */
  --ratio-hero:   16 / 9;

  /* ---------- MATERIAL — از config/theme.json بازنویسی می‌شوند ---------- */
  --glass-blur: 22px;      /* 0 = بدون شیشه */
  --glass-sat: 1.5;
  --border-w: 1px;
  --brand-fill: var(--brand-gradient);
  --btn-radius: var(--r-sm);

  --z-base: 1;
  --z-rail-nav: 20;
  --z-header: 100;
  --z-dropdown: 200;
  --z-sidebar: 300;
  --z-modal: 400;
  --z-toast: 500;
}

/* --------------------------------------------------------------------------
   تم روشن — کامل و اختیاری. با data-theme="light" روی <html> فعال می‌شود.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --bg:        #f6f7fb;
  --surface-1: #ffffff;
  --surface-2: #f1f3f9;
  --surface-3: #e6e9f2;
  --surface-4: #d9dde9;
  --surface-glass:    rgb(255 255 255 / .72);
  --surface-glass-hi: rgb(255 255 255 / .86);
  --overlay-scrim:    rgb(20 24 34 / .42);

  --line:        rgb(16 20 30 / .1);
  --line-strong: rgb(16 20 30 / .18);

  --text:   #10141e;
  --text-2: rgb(16 20 30 / .72);
  --text-3: rgb(16 20 30 / .5);
  --text-4: rgb(16 20 30 / .32);

  --sh-1: 0 1px 2px rgb(16 20 30 / .07);
  --sh-2: 0 4px 14px -4px rgb(16 20 30 / .12);
  --sh-3: 0 14px 34px -10px rgb(16 20 30 / .16);
  --sh-4: 0 28px 64px -16px rgb(16 20 30 / .2);
  --sh-inset-hi: inset 0 1px 0 rgb(255 255 255 / .8);
}

/* حالت فشرده‌ی موبایل */
@media (max-width: 767px) {
  :root {
    --gutter: var(--sp-4);
    --header-h: 64px;
    --fs-4xl: 1.75rem;
    --fs-5xl: 2.25rem;
  }
}