:root {
  /* Typography */
  --font-ar: "Cairo", "Tahoma", "Arial", sans-serif;
  --font-en: "Inter", "Segoe UI", "Arial", sans-serif;
  --font-display: var(--font-ar);
  --font-body: var(--font-ar);
  --font-mono: "Consolas", "Courier New", monospace;
  --font-tabular: "Inter", "Segoe UI", "Cairo", "Tahoma", sans-serif;

  /* Brand */
  --brand-950: #062f2b;
  --brand-900: #093d37;
  --brand-800: #0b5148;
  --brand-700: #0f675a;
  --brand-600: #168271;
  --brand-500: #209b84;

  --accent-orange: #e56c19;
  --accent-blue: #1976a8;
  --success: #16865f;
  --warning: #d18a13;
  --danger: #c93d3d;
  --info: #287daf;

  --page-bg: #f4f7f6;
  --surface: #ffffff;
  --surface-muted: #f8faf9;
  --border: #dce5e2;
  --text-primary: #172521;
  --text-secondary: #667772;

  /* Mapped aliases used across components */
  --color-bg: var(--page-bg);
  --color-bg-elevated: var(--surface);
  --color-bg-muted: var(--surface-muted);
  --color-bg-sidebar: var(--brand-950);
  --color-bg-sidebar-hover: rgba(255, 255, 255, 0.08);
  --color-bg-sidebar-active: rgba(32, 155, 132, 0.22);
  --color-bg-header: rgba(255, 255, 255, 0.96);
  --color-surface-tint: #e8f0ed;
  --color-border: var(--border);
  --color-border-strong: #c2d2cc;
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: #84948e;
  --color-text-inverse: #f4faf7;
  --color-text-sidebar: #9cb5ae;

  --color-primary: var(--brand-700);
  --color-primary-hover: var(--brand-800);
  --color-primary-soft: #d9ebe6;
  --color-accent: var(--accent-orange);
  --color-accent-hover: #c45a12;
  --color-accent-soft: #fce8d8;
  --color-success: var(--success);
  --color-success-soft: #d8f0e6;
  --color-warning: var(--warning);
  --color-warning-soft: #f7ecd2;
  --color-danger: var(--danger);
  --color-danger-soft: #f8dede;
  --color-info: var(--info);
  --color-info-soft: #d9ebf5;
  --color-neutral: #5b6b64;
  --color-neutral-soft: #e8eeeb;

  --shadow-sm: 0 1px 2px rgba(6, 47, 43, 0.05);
  --shadow-md: 0 4px 14px rgba(6, 47, 43, 0.07);
  --shadow-lg: 0 12px 28px rgba(6, 47, 43, 0.1);
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;

  --sidebar-width: 260px;
  --sidebar-collapsed-width: 76px;
  --topbar-height: 64px;
  --header-height: var(--topbar-height);
  --page-max-width: 1600px;
  --page-padding: 24px;
  --input-height: 40px;
  --button-height: 38px;
  --table-header-height: 42px;
  --table-row-min-height: 46px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 48px;

  --z-sidebar: 40;
  --z-header: 45;
  --z-overlay: 35;
  --z-modal: 60;
  --z-toast: 70;
  --z-dropdown: 50;

  --transition: 160ms ease;
  --scrollbar-size: 8px;
  --scrollbar-thumb: rgba(6, 47, 43, 0.28);
  --scrollbar-track: transparent;
}

:root[lang="en"] {
  --font-display: var(--font-en);
  --font-body: var(--font-en);
}

:root[data-theme="dark"] {
  --page-bg: #0d1614;
  --surface: #15221e;
  --surface-muted: #1a2a25;
  --border: #2a3f38;
  --text-primary: #e8f2ee;
  --text-secondary: #9bb0a8;

  --color-bg: var(--page-bg);
  --color-bg-elevated: var(--surface);
  --color-bg-muted: var(--surface-muted);
  --color-bg-sidebar: #041a17;
  --color-bg-sidebar-hover: rgba(255, 255, 255, 0.06);
  --color-bg-sidebar-active: rgba(32, 155, 132, 0.28);
  --color-bg-header: rgba(21, 34, 30, 0.96);
  --color-surface-tint: #1a2c26;
  --color-border: var(--border);
  --color-border-strong: #3d5a4f;
  --color-text: var(--text-primary);
  --color-text-secondary: var(--text-secondary);
  --color-text-muted: #7f978c;
  --color-primary-soft: #1a3d34;
  --color-accent-soft: #3a2618;
  --color-success-soft: #163528;
  --color-warning-soft: #3a2e14;
  --color-danger-soft: #3a1816;
  --color-info-soft: #163040;
  --color-neutral-soft: #24332e;
  --scrollbar-thumb: rgba(232, 242, 238, 0.22);
}