/* ════════════════════════════════════════════════════════
   TOKENS.CSS — Source of Truth برای کل دیزاین
   لایه 1: Primitive (مقادیر خام)
   لایه 2: Semantic (alias های purpose-based)
   لایه 3: Component (توکن‌های اختصاصی هر کامپوننت)
   ════════════════════════════════════════════════════════ */

/* ═══════════ لایه 1: PRIMITIVE ═══════════ */
:root {
  /* ── رنگ‌های خام: Champagne Gold Palette ── */
  --gold-50: #fbf7ec;
  --gold-100: #f6ecd0;
  --gold-200: #edd9a1;
  --gold-300: #e2c06d;
  --gold-400: #d8ab43;
  --gold-500: #c9a961; /* Champagne اصلی */
  --gold-600: #b18a3f;
  --gold-700: #926d2d;
  --gold-800: #765724;
  --gold-900: #5f471f;

  /* ── رنگ‌های خام: Charcoal ── */
  --charcoal-50: #f7f7f6;
  --charcoal-100: #e3e2e0;
  --charcoal-200: #c8c6c2;
  --charcoal-300: #a8a5a0;
  --charcoal-400: #8b8880;
  --charcoal-500: #706d66;
  --charcoal-600: #57544e;
  --charcoal-700: #46433e;
  --charcoal-800: #2b2926;
  --charcoal-900: #1a1917;
  --charcoal-950: #0a0a0a; /* مشکی زغالی اصلی */

  /* ── رنگ‌های خام: Cream ── */
  --cream-50: #fefdfb;
  --cream-100: #f5f1e8; /* کرم اصلی */
  --cream-200: #ebe4d2;
  --cream-300: #ddd2b8;
  --cream-400: #cbbb96;
  --cream-500: #b9a377;

  /* ── رنگ‌های وضعیت ── */
  --success-400: #4ade80;
  --success-500: #34d399;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --info-500: #60a5fa;

  /* ── تایپوگرافی: Estedad ── */
  --font-family-base: 'Estedad', 'Vazirmatn', system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* ── مقیاس فونت (Editorial: تیترهای بزرگ) ── */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: 1.875rem;
  --font-size-4xl: 2.25rem;
  --font-size-5xl: 3rem;
  --font-size-6xl: 3.75rem;
  --font-size-hero: clamp(2.25rem, 6vw, 4.5rem);

  /* ── مقیاس فاصله (Spacing Scale) ── */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── شعاع (Border Radius) ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-2xl: 32px;
  --radius-full: 9999px;

  /* ── سایه‌ها (Shadow Scale) ── */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.25);
  --shadow-gold: 0 8px 32px rgba(201, 169, 97, 0.35);

  /* ── زمان‌بندی انیمیشن ── */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── Z-index Scale ── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-loader: 9999;

  /* ── عرض محتوا ── */
  --container-max: 1180px;
  --container-wide: 1400px;
}

/* ═══════════ لایه 2: SEMANTIC (تم تاریک پیش‌فرض) ═══════════ */
:root,
[data-theme='dark'] {
  --color-bg: var(--charcoal-950);
  --color-bg-elevated: #131210;
  --color-surface: rgba(255, 255, 255, 0.04);
  --color-surface-hover: rgba(255, 255, 255, 0.08);
  --color-border: rgba(255, 255, 255, 0.09);
  --color-border-hover: rgba(201, 169, 97, 0.35);

  --color-text: #f5ede4;
  --color-text-dim: #c4b5a3;
  --color-text-muted: #8a7a68;

  --color-accent: var(--gold-500);
  --color-accent-hover: var(--gold-400);
  --color-accent-deep: var(--gold-700);
  --color-accent-soft: rgba(201, 169, 97, 0.15);
  --color-accent-glow: rgba(201, 169, 97, 0.25);

  --color-success: var(--success-500);
  --color-danger: var(--danger-400);

  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-bg-hover: rgba(255, 255, 255, 0.08);
  --glass-border: rgba(255, 255, 255, 0.09);
  --glass-blur: blur(24px) saturate(160%);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);

  --scrollbar-track: var(--charcoal-950);
  --scrollbar-thumb: var(--color-accent-soft);
}

/* ═══════════ لایه 2: SEMANTIC (تم روشن) ═══════════ */
[data-theme='light'] {
  --color-bg: var(--cream-100);
  --color-bg-elevated: #faf7f0;
  --color-surface: rgba(255, 255, 255, 0.7);
  --color-surface-hover: rgba(255, 255, 255, 0.9);
  --color-border: rgba(26, 25, 23, 0.1);
  --color-border-hover: rgba(177, 138, 63, 0.4);

  --color-text: #1e1710;
  --color-text-dim: #4a3f35;
  --color-text-muted: #8a7a68;

  --color-accent: var(--gold-600);
  --color-accent-hover: var(--gold-700);
  --color-accent-deep: var(--gold-800);
  --color-accent-soft: rgba(177, 138, 63, 0.12);
  --color-accent-glow: rgba(177, 138, 63, 0.2);

  --color-success: #059669;
  --color-danger: #dc2626;

  --glass-bg: rgba(255, 255, 255, 0.6);
  --glass-bg-hover: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(255, 255, 255, 0.4);
  --glass-blur: blur(24px) saturate(150%);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

  --scrollbar-track: var(--cream-100);
  --scrollbar-thumb: rgba(177, 138, 63, 0.3);
}

/* ═══════════ لایه 3: COMPONENT TOKENS ═══════════ */
:root {
  /* Navbar */
  --nav-height: 60px;
  --nav-radius: var(--radius-full);

  /* Hero */
  --hero-padding-y: var(--space-16);

  /* Cards */
  --card-radius: var(--radius-xl);
  --card-padding: var(--space-6);

  /* Buttons */
  --btn-radius: var(--radius-full);
  --btn-padding-x: var(--space-8);
  --btn-padding-y: var(--space-4);
}