:root {
  
  --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;
  
  --brand-rgb: 255 67 126;
  --accent-rgb: 139 92 246;

  
  --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);

  
  --success: #34c36d;
  --warning: #f5b544;
  --danger:  #ed6167;   
  --imdb:    #f5c518;

  
  --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:      #f4f6fa;
  
  --text-1:    var(--text);
  --text-2:    rgb(244 246 250 / .74);
  --text-3:    rgb(244 246 250 / .52);
  --text-4:    rgb(244 246 250 / .34);

  
  --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;  
  --fs-xs:  .75rem;    
  --fs-sm:  .8125rem;  
  --fs-md:  .875rem;   
  --fs-base: .9375rem; 
  --fs-lg:  1.0625rem; 
  --fs-xl:  1.25rem;   
  --fs-2xl: 1.5rem;    
  --fs-3xl: 2rem;      
  --fs-4xl: 2.75rem;   
  --fs-5xl: 3.75rem;   

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

  
  --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;

  
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;

  
  --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);

  
  --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);      
  --e-in-out: cubic-bezier(.65, 0, .35, 1);
  --e-spring: cubic-bezier(.34, 1.56, .64, 1);   
  --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);

  
  --container: 1440px;
  --gutter: var(--sp-5);
  
  --on-brand: #ffffff;
  --on-media: #ffffff;

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

  
  --ratio-poster: 230 / 345;   
  --ratio-cover:  325 / 185;   
  --ratio-mini:   190 / 102;   
  --ratio-hero:   16 / 9;

  
  --glass-blur: 22px;      
  --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;
}

: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;
  }
}