/**
 * ECOIA — Design System Variables
 * Full Visual Redesign — Cinematic Dark Luxury
 * ─────────────────────────────────────────────
 * @import باید اول باشد — قبل از هر rule دیگری
 */

/* ═══════════════════════════════════════════════════════════
   Fonts — همه از head.php با media=print onload لود می‌شوند
   (این @import حذف شد تا double-load نشود)
   ══════════════════════════════════════════════════════════ */

:root {

  /* ═══════════════════════════════════════════════════════
     BACKGROUNDS
  ════════════════════════════════════════════════════════ */
  --bg-void:          #070707;   /* deepest black — preloader / footer */
  --bg-primary:       #0A0A0A;   /* base page bg */
  --bg-secondary:     #0E0E0E;   /* alternating sections */
  --bg-card:          #111111;   /* card surfaces */
  --bg-card-hover:    #161616;   /* card on hover */
  --bg-glass:         rgba(10, 10, 10, 0.85);  /* header / overlays */
  --bg-input:         #0D0D0D;   /* form inputs */
  --bg-footer:        #050505;   /* footer — deepest */
  --bg-header:        rgba(10, 10, 10, 0.88);  /* sticky header */

  /* ═══════════════════════════════════════════════════════
     GOLD — Champagne, NOT yellow
     قانون: فقط از این palette — هیچ #D4AF37 یا زرد ممنوع
  ════════════════════════════════════════════════════════ */
  --gold:               #C8A951;   /* primary champagne gold */
  --gold-light:         #E8D5A0;   /* text روی تاریکی */
  --gold-bright:        #F0E0A8;   /* highlights / hover */
  --gold-dark:          #8B6914;   /* borders subtle */
  --gold-deep:          #5A4410;   /* very dark — almost invisible */

  /* Glow */
  --gold-glow:          rgba(200, 169, 81, 0.12);
  --gold-glow-strong:   rgba(200, 169, 81, 0.25);
  --gold-glow-intense:  rgba(200, 169, 81, 0.40);

  /* Gradients */
  --gold-gradient:         linear-gradient(135deg, #C8A951 0%, #8B6914 100%);
  --gold-gradient-reverse: linear-gradient(135deg, #E8D5A0 0%, #C8A951 55%, #A07828 100%);
  --gold-gradient-h:       linear-gradient(90deg,  #8B6914 0%, #E8D5A0 50%, #8B6914 100%);
  --gold-gradient-glow:    linear-gradient(135deg, #C8A951 0%, #E8D5A0 50%, #C8A951 100%);

  /* Aliases برای backward compatibility */
  --gold-main:          #C8A951;
  --gold-hover:         #E8D5A0;
  --gold-muted:         rgba(200, 169, 81, 0.10);
  --gold-muted-strong:  rgba(200, 169, 81, 0.20);

  /* ═══════════════════════════════════════════════════════
     TYPOGRAPHY COLORS — Warm, NOT cold white
  ════════════════════════════════════════════════════════ */
  --text-primary:   #F0EDE8;   /* warm white */
  --text-secondary: #9A9590;   /* warm gray */
  --text-muted:     #4A4845;   /* very muted */
  --text-on-gold:   #070707;   /* text روی دکمه طلایی */

  /* ═══════════════════════════════════════════════════════
     BORDERS
  ════════════════════════════════════════════════════════ */
  --border:               #1A1A1A;
  --border-subtle:        #141414;
  --border-gold:          rgba(200, 169, 81, 0.18);
  --border-gold-hover:    rgba(200, 169, 81, 0.40);
  --border-gold-strong:   rgba(200, 169, 81, 0.55);

  /* Aliases backward compat */
  --border-default:       #1A1A1A;
  --border-hover:         rgba(200, 169, 81, 0.40);
  --border-gold-faint:    rgba(200, 169, 81, 0.15);
  --border-gold-medium:   rgba(200, 169, 81, 0.35);
  --border-input:         #222222;
  --border-input-focus:   #C8A951;

  /* ═══════════════════════════════════════════════════════
     SHADOWS & OVERLAYS
  ════════════════════════════════════════════════════════ */
  --overlay-dark:       rgba(0, 0, 0, 0.65);
  --overlay-darker:     rgba(0, 0, 0, 0.85);
  --overlay-gold:       rgba(200, 169, 81, 0.05);
  --shadow-card:        0 1px 24px rgba(0, 0, 0, 0.50);
  --shadow-gold:        0 0 24px rgba(200, 169, 81, 0.15);
  --shadow-gold-strong: 0 0 48px rgba(200, 169, 81, 0.28);
  --shadow-elevated:    0 8px 48px rgba(0, 0, 0, 0.70);
  --shadow-header:      0 1px 32px rgba(0, 0, 0, 0.60);

  /* ═══════════════════════════════════════════════════════
     TYPOGRAPHY — Font Families
  ════════════════════════════════════════════════════════ */
  --font-fa:          'Vazirmatn', sans-serif;
  --font-display:     'Cormorant Garamond', 'Georgia', serif;   /* عناوین cinematic */
  --font-body-en:     'Inter', system-ui, sans-serif;           /* متن انگلیسی */

  /* Aliases backward compat */
  --font-en-display:  'Cormorant Garamond', serif;
  --font-en-body:     'Inter', system-ui, sans-serif;

  /* ═══════════════════════════════════════════════════════
     TYPE SCALE — مقیاس بازطراحی‌شده (refined, کوچک‌تر)
     نام‌گذاری اصلی: --fs-*  |  alias قدیمی: --text-*
  ════════════════════════════════════════════════════════ */
  --fs-display: clamp(36px, 4.5vw, 64px);   /* Cormorant italic — عناوین بزرگ */
  --fs-h1:      clamp(30px, 3.8vw, 52px);   /* Vazirmatn 700 */
  --fs-h2:      clamp(24px, 3vw, 40px);     /* section titles */
  --fs-h3:      clamp(18px, 2.2vw, 28px);
  --fs-body:    clamp(15px, 1.4vw, 17px);
  --fs-small:   clamp(12px, 1.1vw, 14px);
  --fs-label:   11px;                       /* uppercase tracking */

  /* Hero — استثنا از قانون (بزرگ‌تر برای impact) */
  --fs-hero:    clamp(42px, 5.5vw, 80px);

  /* ── Alias قدیمی → مقادیر جدید (سازگاری با فایل‌های موجود) ── */
  --text-display: var(--fs-display);
  --text-h1:      var(--fs-h1);
  --text-h2:      var(--fs-h2);
  --text-h3:      var(--fs-h3);
  --text-body:    var(--fs-body);
  --text-hero:    var(--fs-hero);
  --text-label:   var(--fs-label);
  --text-sm:      var(--fs-small);
  --text-xs:      11px;

  /* ── Font Size Scale (backward compat با base.css / components.css) ── */
  --text-base:   var(--fs-body);
  --text-lg:     clamp(17px, 1.7vw, 20px);
  --text-xl:     clamp(20px, 2vw, 24px);
  --text-2xl:    var(--fs-h3);
  --text-3xl:    var(--fs-h3);
  --text-4xl:    var(--fs-h2);
  --text-5xl:    var(--fs-h1);

  /* ═══════════════════════════════════════════════════════
     SPACING — section padding
  ════════════════════════════════════════════════════════ */
  --section-pad:      clamp(80px, 10vw, 140px);
  --section-pad-y:    clamp(80px, 10vw, 140px);
  --container:        min(1280px, calc(100% - 48px));
  --container-max:    1280px;
  --container-pad:    clamp(16px, 3vw, 24px);

  /* Card padding */
  --card-pad:     clamp(24px, 3vw, 40px);

  /* ── Space Scale — backward compat با base.css / layout.css / components.css ── */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-7:   28px;
  --space-8:   32px;
  --space-9:   36px;
  --space-10:  40px;
  --space-12:  48px;
  --space-14:  56px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;

  /* ═══════════════════════════════════════════════════════
     BORDER RADIUS — اصل: حداکثر 4px روی کارت اصلی
  ════════════════════════════════════════════════════════ */
  --radius-sm:    2px;
  --radius-md:    4px;   /* MAX برای کارت‌های اصلی */
  --radius-lg:    6px;
  --radius-xl:    8px;
  --radius-full:  9999px;

  /* ═══════════════════════════════════════════════════════
     TRANSITIONS — هیچ حرکت جهنده‌ای ممنوع
  ════════════════════════════════════════════════════════ */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);   /* smooth deceleration */
  --ease-in-out:  cubic-bezier(0.37, 0, 0.63, 1);
  --ease-cinematic: cubic-bezier(0.23, 1, 0.32, 1); /* لوکس */

  --transition-fast:   200ms var(--ease-out);
  --transition-base:   350ms var(--ease-out);
  --transition-slow:   600ms var(--ease-cinematic);
  --transition-smooth: 400ms var(--ease-cinematic);

  /* ═══════════════════════════════════════════════════════
     HEADER
  ════════════════════════════════════════════════════════ */
  --header-height:        80px;
  --header-height-mobile: 60px;

  /* ═══════════════════════════════════════════════════════
     Z-INDEX LAYERS
  ════════════════════════════════════════════════════════ */
  --z-base:       1;
  --z-card:       10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-cursor:     999;
  --z-overlay:    1000;
  --z-modal:      1100;
  --z-preloader:  9999;

  /* ═══════════════════════════════════════════════════════
     STATE COLORS
  ════════════════════════════════════════════════════════ */
  --state-success:    #3DBE7A;
  --state-success-bg: rgba(61, 190, 122, 0.08);
  --state-warning:    #E8A020;
  --state-warning-bg: rgba(232, 160, 32, 0.08);
  --state-error:      #E05252;
  --state-error-bg:   rgba(224, 82, 82, 0.08);
  --state-info:       #4A90D9;
  --state-info-bg:    rgba(74, 144, 217, 0.08);

  /* ═══════════════════════════════════════════════════════
     LETTER SPACING — label style
  ════════════════════════════════════════════════════════ */
  --tracking-label:  0.20em;
  --tracking-wide:   0.12em;
  --tracking-tight: -0.02em;

  /* ═══════════════════════════════════════════════════════
     GRID BACKGROUND LINES (برای Why ECOIA section)
  ════════════════════════════════════════════════════════ */
  --grid-line: rgba(200, 169, 81, 0.04);

}

/* ═══════════════════════════════════════════════════════════
   GLOBAL OVERRIDES برای فایل‌های دست‌نخورده
   (base.css / layout.css / components.css)
   اینها متغیرهای قدیمی را با مقادیر جدید map می‌کنند
════════════════════════════════════════════════════════════ */

/* components.css از --gold-gradient استفاده می‌کند */
/* header.css و footer.css از --bg-header / --border-gold-faint استفاده می‌کنند */
/* همه با مقادیر بالا cover شده‌اند */