/* ============================================================================
   Design Tokens — سیستم طراحی اختصاصی پنل بکاپ‌منیجر
   رنگ‌ها، فاصله‌ها، شعاع گوشه‌ها، سایه‌ها و تایپوگرافی در یک جا استاندارد شده‌اند.
   حالت روشن پیش‌فرض است؛ حالت تاریک با [data-theme="dark"] روی <html> فعال می‌شود.
   ============================================================================ */

:root {
  /* --- Brand --- */
  --bm-primary: #2d5bff;
  --bm-primary-hover: #1f45d8;
  --bm-primary-active: #1a3bb8;
  --bm-primary-soft: rgba(45, 91, 255, 0.10);
  --bm-primary-softer: rgba(45, 91, 255, 0.05);
  --bm-primary-contrast: #ffffff;

  --bm-secondary: #0f9b8e;
  --bm-secondary-hover: #0b7f74;
  --bm-secondary-soft: rgba(15, 155, 142, 0.12);

  /* --- Meaningful status colors --- */
  --bm-success: #12a36a;
  --bm-success-soft: rgba(18, 163, 106, 0.12);
  --bm-warning: #d98200;
  --bm-warning-soft: rgba(217, 130, 0, 0.14);
  --bm-danger: #dc3d43;
  --bm-danger-soft: rgba(220, 61, 67, 0.12);
  --bm-info: #2f7fd6;
  --bm-info-soft: rgba(47, 127, 214, 0.12);

  /* --- Surfaces --- */
  --bm-bg: #f4f6fb;
  --bm-surface: #ffffff;
  --bm-surface-2: #f8fafc;
  --bm-surface-3: #eef1f7;
  --bm-border: #e3e8f0;
  --bm-border-strong: #cfd7e4;

  /* --- Text --- */
  --bm-text: #101828;
  --bm-text-muted: #667085;
  --bm-text-soft: #98a2b3;
  --bm-text-invert: #ffffff;

  /* --- Shadows (نرم و کم‌عمق؛ خبری از سایه‌های سنگین نیست) --- */
  --bm-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --bm-shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.07), 0 1px 2px rgba(16, 24, 40, 0.04);
  --bm-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
  --bm-shadow-lg: 0 12px 28px rgba(16, 24, 40, 0.12);

  /* --- Radii --- */
  --bm-radius-xs: 6px;
  --bm-radius-sm: 9px;
  --bm-radius: 13px;
  --bm-radius-lg: 18px;
  --bm-radius-pill: 999px;

  /* --- Spacing scale --- */
  --bm-space-1: 4px;
  --bm-space-2: 8px;
  --bm-space-3: 12px;
  --bm-space-4: 16px;
  --bm-space-5: 20px;
  --bm-space-6: 24px;
  --bm-space-8: 32px;
  --bm-space-10: 40px;
  --bm-space-12: 56px;

  /* --- Typography --- */
  --bm-font: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  --bm-font-mono: "Cascadia Mono", "Consolas", "SFMono-Regular", ui-monospace, monospace;
  --bm-fs-xs: 0.75rem;
  --bm-fs-sm: 0.8125rem;
  --bm-fs-base: 0.9375rem;
  --bm-fs-md: 1rem;
  --bm-fs-lg: 1.125rem;
  --bm-fs-xl: 1.375rem;
  --bm-fs-2xl: 1.75rem;
  --bm-fs-3xl: 2.25rem;
  --bm-fs-4xl: 3rem;
  --bm-lh: 1.75;

  /* --- Layout --- */
  --bm-sidebar-width: 268px;
  --bm-sidebar-collapsed: 78px;
  --bm-topbar-height: 68px;
  --bm-container: 1200px;

  /* --- Motion (ظریف و سریع؛ هیچ انیمیشن آزاردهنده‌ای وجود ندارد) --- */
  --bm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --bm-duration-fast: 140ms;
  --bm-duration: 240ms;
  --bm-duration-slow: 420ms;
}

[data-theme="dark"] {
  --bm-primary: #6b8bff;
  --bm-primary-hover: #8199ff;
  --bm-primary-active: #5a7cf5;
  --bm-primary-soft: rgba(107, 139, 255, 0.16);
  --bm-primary-softer: rgba(107, 139, 255, 0.08);
  --bm-primary-contrast: #0b0f16;

  --bm-secondary: #2ec4b6;
  --bm-secondary-hover: #46d6c7;
  --bm-secondary-soft: rgba(46, 196, 182, 0.16);

  --bm-success: #3ddc97;
  --bm-success-soft: rgba(61, 220, 151, 0.15);
  --bm-warning: #f0b429;
  --bm-warning-soft: rgba(240, 180, 41, 0.16);
  --bm-danger: #ff6b6b;
  --bm-danger-soft: rgba(255, 107, 107, 0.16);
  --bm-info: #63b3ed;
  --bm-info-soft: rgba(99, 179, 237, 0.16);

  --bm-bg: #0b0f16;
  --bm-surface: #121821;
  --bm-surface-2: #171f2a;
  --bm-surface-3: #1e2836;
  --bm-border: #222c3a;
  --bm-border-strong: #2f3b4c;

  --bm-text: #e7edf5;
  --bm-text-muted: #93a1b5;
  --bm-text-soft: #6c7a8d;
  --bm-text-invert: #0b0f16;

  --bm-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --bm-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --bm-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.5);
  --bm-shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.55);
}