:root {
  /* ---------- رنگ‌های پایه (تم روشن — پالت آبی/بنفش تأییدشدهٔ کارفرما در طرح‌ها) ---------- */
  --color-bg: #f8f9ff;
  --color-surface: #ffffff;
  --color-surface-alt: #eff4ff;
  --color-surface-elevated: #ffffff;
  --color-border: #d9e3f6;
  --color-text: #121c2a;
  --color-text-strong: #121c2a;
  --color-text-muted: #464554;
  --color-text-faint: #68677c;
  --color-scrollbar: #c7c4d7;

  --color-primary: #4648d4;
  --color-primary-hover: #3739ad;
  --color-primary-soft: #e1e0ff;
  --color-primary-text-on: #ffffff;

  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-danger: #ba1a1a;
  --color-danger-soft: #ffdad6;
  --color-warning: #ad7b2c;
  --color-warning-soft: #f3ead9;
  --color-info: #2563eb;
  --color-info-soft: #dbeafe;

  --color-sidebar-bg: #eff4ff;
  --color-sidebar-border: #d9e3f6;
  --color-sidebar-text: #464554;
  --color-sidebar-text-active: #121c2a;
  --color-sidebar-active-bg: #e1e0ff;
  --color-sidebar-active-accent: #4648d4;

  --color-overlay: rgba(18, 28, 42, 0.42);

  /* ---------- اندازه‌ها (مقیاس ۸px) ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;

  --shadow-sm: 0 1px 2px rgba(18, 28, 42, 0.05), 0 1px 3px rgba(18, 28, 42, 0.04);
  --shadow-md: 0 4px 16px rgba(18, 28, 42, 0.08), 0 2px 6px rgba(18, 28, 42, 0.05);

  --sidebar-width: 264px;
  --transition-fast: 160ms ease;
  --input-height: 44px;

  /* معیار یکسان ارتفاع نوار پایین موبایل (bottom-nav.css) — هر عنصر ثابت/چسبان یا پدینگ پایین
     که باید بالاتر از نوار پایین بنشیند، از همین متغیر استفاده کند، نه عدد دستی — مورد #2 task.md. */
  --bottom-nav-height: 60px;
  /* مقدار پیش‌فرض قبل از این‌که ShellChrome ارتفاع واقعی هدر را اندازه بگیرد و override کند. */
  --header-height: 64px;
}

:root[data-theme='dark'] {
  /* ---------- تم تیره (طراحی مستقل، هماهنگ با پالت آبی/بنفش برند) ---------- */
  --color-bg: #10121c;
  --color-surface: #1a1d2b;
  --color-surface-alt: #232640;
  --color-surface-elevated: #262a3d;
  --color-border: #34395a;
  --color-text: #eef0fb;
  --color-text-strong: #f5f6fd;
  --color-text-muted: #b3b6d1;
  --color-text-faint: #9497b8;
  --color-scrollbar: #3a3e5c;

  --color-primary: #7678f0;
  --color-primary-hover: #8d8ff4;
  --color-primary-soft: rgba(118, 120, 240, 0.16);
  --color-primary-text-on: #12142a;

  --color-success: #4fbf7a;
  --color-success-soft: rgba(79, 191, 122, 0.14);
  --color-danger: #e5716b;
  --color-danger-soft: rgba(229, 113, 107, 0.14);
  --color-warning: #d8ac6a;
  --color-warning-soft: rgba(216, 172, 106, 0.14);
  --color-info: #6ea3f5;
  --color-info-soft: rgba(110, 163, 245, 0.14);

  --color-sidebar-bg: #171a29;
  --color-sidebar-border: #34395a;
  --color-sidebar-text: #b3b6d1;
  --color-sidebar-text-active: #f5f6fd;
  --color-sidebar-active-bg: rgba(118, 120, 240, 0.16);
  --color-sidebar-active-accent: #7678f0;

  --color-overlay: rgba(0, 0, 0, 0.6);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
}