/* =============================================================================
   Zagros Tech — Design Tokens · «Precision Industrial / Tech»
   Light: نئوترالِ تکنولوژیک (کربن روشن) · Dark: Carbon/Navy
   Gold = برند/CTA اصلی · Cyan = اکسنت تکنولوژی · Navy-Charcoal = ساختار
   ترتیب لود: fonts → tokens → base → components → layout
   ============================================================================= */

:root {
  /* ================= LIGHT — Precision Industrial ================= */
  --bg: #f3f5f7;
  --surface: #ffffff;
  --surface-2: #e9edf1;
  --surface-3: #dce2e8;

  --text: #111820;
  --text-dim: #53606d;
  --text-faint: #89949f;
  --contrast: #0a0f16;   /* بیشینه‌کنتراستِ متن — برای حالت‌های هوور */

  --border: #dce2e8;
  --border-strong: #c6d0d9;

  /* Brand — Industrial Gold */
  --brand: #b8862f;
  --brand-strong: #956b20;
  --brand-contrast: #ffffff;
  --brand-tint: rgba(184, 134, 47, 0.10);

  /* Tech — Cyan */
  --accent: #168aaa;
  --accent-strong: #096d89;
  --accent-tint: rgba(22, 138, 170, 0.10);

  --danger: #c4473d;
  --danger-tint: rgba(196, 71, 61, 0.10);
  --warning: #b77a20;
  --success: #168aaa;

  /* Metal */
  --metal-1: #e3c477;
  --metal-2: #b8862f;
  --metal-3: #79591f;

  --sh-1: 0 1px 3px rgba(15, 25, 35, 0.06);
  --sh-2: 0 4px 12px rgba(15, 25, 35, 0.08), 0 18px 40px rgba(15, 25, 35, 0.08);
  --sh-hover: 0 8px 20px rgba(15, 25, 35, 0.12), 0 24px 50px rgba(15, 25, 35, 0.10);
  --sh-focus: 0 0 0 3px var(--brand-tint);

  color-scheme: light;

  /* --- structure (بدون تغییر) --- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 22px; --s-6: 32px; --s-7: 44px; --s-8: 60px; --s-9: 84px;

  --r-1: 8px; --r-2: 12px; --r-3: 18px; --r-pill: 999px;

  --font: 'Shabnam', 'Yekan Bakh', Tahoma, 'Segoe UI', sans-serif;
  --font-mono: var(--font);
  --font-num: var(--font);
  --fs-xs: 12px; --fs-sm: 13px; --fs-base: 14px; --fs-md: 16px;
  --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 27px; --fs-3xl: 34px; --fs-4xl: 44px;
  --lh-body: 1.7; --lh-tight: 1.25;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 180ms; --dur-in: 240ms; --dur-out: 150ms;

  --container: 1200px;
  --header-h: 84px;
  --z-header: 100; --z-drawer: 200; --z-modal: 300; --z-toast: 400;
}

[data-theme='dark'] {
  /* ================= DARK — Carbon / Navy ================= */
  --bg: #080d13;
  --surface: #101720;
  --surface-2: #151e29;
  --surface-3: #1b2632;

  --text: #f2f5f7;
  --text-dim: #aab6c1;
  --text-faint: #687684;
  --contrast: #ffffff;

  --border: #263442;
  --border-strong: #344656;

  /* Brand — Gold */
  --brand: #d9a441;
  --brand-strong: #efbb55;
  --brand-contrast: #11100b;
  --brand-tint: rgba(217, 164, 65, 0.14);

  /* Tech — Electric Cyan */
  --accent: #39b9d8;
  --accent-strong: #5ed0eb;
  --accent-tint: rgba(57, 185, 216, 0.13);

  --danger: #ed7165;
  --danger-tint: rgba(237, 113, 101, 0.14);
  --warning: #e2ae4c;
  --success: #39b9d8;

  /* Metal */
  --metal-1: #e8d19a;
  --metal-2: #c49a4b;
  --metal-3: #80652f;

  --sh-1: 0 1px 3px rgba(0, 0, 0, 0.45);
  --sh-2: 0 6px 16px rgba(0, 0, 0, 0.40), 0 20px 50px rgba(0, 0, 0, 0.35);
  --sh-hover: 0 10px 24px rgba(0, 0, 0, 0.50), 0 28px 60px rgba(0, 0, 0, 0.40);
  --sh-focus: 0 0 0 3px var(--brand-tint);

  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; --dur-in: 0ms; --dur-out: 0ms; }
}