:root {
  /* ── Brand primary (enterprise blue) ─────────── */
  --color-primary:        #2f65a7;
  --color-primary-hover:  #24538d;
  --color-primary-dark:   #16325c;
  --color-primary-light:  #eaf2fb;
  --color-primary-50:     #f5f9fd;
  --color-secondary:      #58677b;
  --color-secondary-hover:#3b4a60;

  /* ── Semantic ─────────────────────────────────── */
  --color-success:        #137a4b;
  --color-success-light:  #dff5e9;
  --color-warning:        #a15c08;
  --color-warning-light:  #fff0d4;
  --color-danger:         #b42332;
  --color-danger-light:   #fde7ea;
  --color-info:           #176b91;
  --color-info-light:     #dff2fa;

  /* ── Surface / Neutral (slate-based) ─────────── */
  --color-page-bg:        #f3f5f8;
  --color-surface:        #ffffff;
  --color-surface-hover:  #f8f9fb;
  --color-border:         #dce2e9;
  --color-border-strong:  #c4ccd6;

  /* ── Text ─────────────────────────────────────── */
  --color-text:           #182233;
  --color-text-primary:   #182233;
  --color-text-secondary: #536176;
  --color-text-muted:     #788598;
  --color-text-disabled:  #9aa5b5;
  --color-text-inverse:   #ffffff;

  /* ── Dark Sidebar ─────────────────────────────── */
  --sidebar-bg:           #14243b;
  --sidebar-bg-hover:     #1c3050;
  --sidebar-text:         #c7d2e2;
  --sidebar-text-muted:   #8797ad;
  --sidebar-active-bg:    #243c5d;
  --sidebar-active-text:  #ffffff;
  --sidebar-border:       rgba(255,255,255,.07);
  --sidebar-header-bg:    #0f1d30;
  --sidebar-group-label:  #5a708a;

  /* ── Layout dimensions ────────────────────────── */
  --sidebar-width:        260px;
  --sidebar-collapsed:    64px;
  --header-height:        58px;
  --content-padding:      24px;

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

  /* ── Spacing scale aliases for dashboard ─────── */
  --space-1:  var(--sp-1);
  --space-2:  var(--sp-2);
  --space-3:  var(--sp-3);
  --space-4:  var(--sp-4);
  --space-5:  var(--sp-5);
  --space-6:  var(--sp-6);
  --space-8:  var(--sp-8);
  --space-10: var(--sp-10);

  /* ── Shape ────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   7px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────── */
  --shadow-xs:  0 1px 2px rgba(15,23,42,.05);
  --shadow-sm:  0 2px 8px rgba(15,23,42,.07);
  --shadow-md:  0 4px 16px rgba(15,23,42,.10);
  --shadow-lg:  0 8px 24px rgba(15,23,42,.13);

  /* ── Typography ───────────────────────────────── */
  --font-en: 'Cairo', 'Segoe UI', Arial, sans-serif;
  --font-ar: 'Cairo', 'Segoe UI', Arial, sans-serif;
  --font-size-xs:   0.75rem;
  --font-size-sm:   0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg:   1.0625rem;
  --font-size-xl:   1.25rem;
  --font-size-2xl:  1.5rem;
  --font-size-3xl:  2rem;

  /* ── Z-index ──────────────────────────────────── */
  --z-sidebar:  100;
  --z-topbar:   200;
  --z-dropdown: 300;
  --z-modal:    400;
  --z-toast:    500;

  /* ── Transitions ──────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* ── Dark Theme Overrides ─────────────────────────────────── */
html.dark-theme, body.dark-theme, [data-bs-theme="dark"] {
  --color-page-bg:        #0f172a;
  --color-surface:        #1e293b;
  --color-surface-hover:  #334155;
  --color-border:         #334155;
  --color-border-strong:  #475569;
  --color-text:           #f8fafc;
  --color-text-primary:   #f8fafc;
  --color-text-secondary: #cbd5e1;
  --color-text-muted:     #94a3b8;
  --color-text-disabled:  #64748b;
  --color-text-inverse:   #0f172a;

  /* Brand primary adjustments */
  --color-primary:        #60a5fa;
  --color-primary-hover:  #93c5fd;
  --color-primary-dark:   #2563eb;
  --color-primary-light:  #1e3a8a;
  --color-primary-50:     #0f1e3d;

  /* Semantic metrics */
  --color-success:        #34d399;
  --color-success-light:  #064e3b;
  --color-warning:        #fbbf24;
  --color-warning-light:  #78350f;
  --color-danger:         #f87171;
  --color-danger-light:   #7f1d1d;
  --color-info:           #38bdf8;
  --color-info-light:     #0c4a6e;
}