:root,
[data-bs-theme="light"] {
  --sms-bg: #f5f6f8;
  --sms-surface: #fcfcfd;
  --sms-surface-2: #eff1f5;
  --sms-surface-hover: #e8ebf1;
  --sms-border: #dfe3ea;
  --sms-border-strong: #c7cdd8;
  --sms-text: #1e2433;
  --sms-text-muted: #586174;
  --sms-on-accent: #fcfcfd;
  --sms-logo-bg: #ffffff;
  --sms-bg-rgb: 245, 246, 248;
  --sms-surface-rgb: 252, 252, 253;
  --sms-surface-2-rgb: 239, 241, 245;
  --sms-text-rgb: 30, 36, 51;

  --sms-primary: #0b3470;
  --sms-primary-rgb: 11, 52, 112;
  --sms-primary-hover: #082a5b;
  --sms-primary-subtle: #e6ecf5;
  --sms-primary-border: #bfcde2;

  --sms-success: #3a7456;
  --sms-success-rgb: 58, 116, 86;
  --sms-success-hover: #30624a;
  --sms-success-subtle: #e4f0e9;
  --sms-success-border: #bcd8c8;

  --sms-warning: #8a6420;
  --sms-warning-rgb: 138, 100, 32;
  --sms-warning-hover: #75541a;
  --sms-warning-subtle: #f6eedd;
  --sms-warning-border: #e5d2a8;

  --sms-danger: #a8474b;
  --sms-danger-rgb: 168, 71, 75;
  --sms-danger-hover: #8f3c40;
  --sms-danger-subtle: #f6e4e4;
  --sms-danger-border: #e6c1c2;

  --sms-info: #3a6d80;
  --sms-info-rgb: 58, 109, 128;
  --sms-info-hover: #305b6b;
  --sms-info-subtle: #e1edf1;
  --sms-info-border: #b9d3dc;

  --sms-neutral: #5d6679;
  --sms-neutral-rgb: 93, 102, 121;
  --sms-neutral-hover: #4e5667;

  --sms-chart-1: #3a62a0;
  --sms-chart-2: #6fa58a;
  --sms-chart-3: #c49a55;
  --sms-chart-4: #c27578;
  --sms-chart-5: #6a9bad;
  --sms-chart-grid: rgba(30, 36, 51, 0.06);

  --sms-overlay: rgba(20, 23, 31, 0.45);
  --sms-focus-ring: 0 0 0 3px rgba(var(--sms-primary-rgb), 0.28);

  --sms-shadow-xs: 0 1px 2px rgba(30, 36, 51, 0.05);
  --sms-shadow-sm: 0 1px 3px rgba(30, 36, 51, 0.07), 0 1px 2px rgba(30, 36, 51, 0.04);
  --sms-shadow-md: 0 4px 12px rgba(30, 36, 51, 0.07), 0 2px 4px rgba(30, 36, 51, 0.04);
  --sms-shadow-lg: 0 12px 32px rgba(30, 36, 51, 0.12), 0 4px 8px rgba(30, 36, 51, 0.05);

  --sms-font-sans: "Cairo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --sms-text-xs: 0.8125rem;
  --sms-text-sm: 0.9375rem;
  --sms-text-base: 1.0625rem;
  --sms-text-lg: 1.1875rem;
  --sms-text-xl: 1.375rem;
  --sms-text-2xl: 1.75rem;
  --sms-text-3xl: 1.875rem;
  --sms-leading-tight: 1.25;
  --sms-leading-normal: 1.55;
  --sms-weight-regular: 500;
  --sms-weight-medium: 600;
  --sms-weight-semibold: 700;
  --sms-weight-bold: 800;

  --sms-space-1: 0.25rem;
  --sms-space-2: 0.5rem;
  --sms-space-3: 0.75rem;
  --sms-space-4: 1rem;
  --sms-space-5: 1.25rem;
  --sms-space-6: 1.5rem;
  --sms-space-8: 2rem;
  --sms-space-10: 2.5rem;

  --sms-radius-sm: 8px;
  --sms-radius-md: 10px;
  --sms-radius-lg: 12px;
  --sms-radius-pill: 999px;

  --sms-duration-fast: 150ms;
  --sms-duration-base: 200ms;
  --sms-ease: cubic-bezier(0.4, 0, 0.2, 1);

  --sms-sidebar-width: 256px;
  --sms-sidebar-collapsed-width: 72px;
  --sms-topbar-height: 60px;
}

[data-bs-theme="dark"] {
  --sms-bg: #14171f;
  --sms-surface: #1b1f2a;
  --sms-surface-2: #232836;
  --sms-surface-hover: #2a3040;
  --sms-border: #2e3444;
  --sms-border-strong: #3c4356;
  --sms-text: #e4e7ee;
  --sms-text-muted: #9ba3b4;
  --sms-on-accent: #14171f;
  --sms-logo-bg: #ffffff;
  --sms-bg-rgb: 20, 23, 31;
  --sms-surface-rgb: 27, 31, 42;
  --sms-surface-2-rgb: 35, 40, 54;
  --sms-text-rgb: 228, 231, 238;

  --sms-primary: #8fb0e6;
  --sms-primary-rgb: 143, 176, 230;
  --sms-primary-hover: #a8c2ec;
  --sms-primary-subtle: #172238;
  --sms-primary-border: #2c4266;

  --sms-success: #86c2a0;
  --sms-success-rgb: 134, 194, 160;
  --sms-success-hover: #9bcfb1;
  --sms-success-subtle: #1c2e25;
  --sms-success-border: #2f4d3d;

  --sms-warning: #d8b46e;
  --sms-warning-rgb: 216, 180, 110;
  --sms-warning-hover: #e1c386;
  --sms-warning-subtle: #322a1a;
  --sms-warning-border: #54462a;

  --sms-danger: #e3999b;
  --sms-danger-rgb: 227, 153, 155;
  --sms-danger-hover: #eaaeb0;
  --sms-danger-subtle: #35201f;
  --sms-danger-border: #583536;

  --sms-info: #8dbccc;
  --sms-info-rgb: 141, 188, 204;
  --sms-info-hover: #a2c9d6;
  --sms-info-subtle: #1a2b31;
  --sms-info-border: #2e4852;

  --sms-neutral: #a9b0bf;
  --sms-neutral-rgb: 169, 176, 191;
  --sms-neutral-hover: #bcc2ce;

  --sms-chart-1: #8fb0e6;
  --sms-chart-2: #86c2a0;
  --sms-chart-3: #d8b46e;
  --sms-chart-4: #e3999b;
  --sms-chart-5: #8dbccc;
  --sms-chart-grid: rgba(228, 231, 238, 0.07);

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

  --sms-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --sms-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --sms-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35);
  --sms-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --sms-media-bg: #0f1320;
  --sms-media-overlay: rgba(15, 19, 32, 0.65);
  --sms-media-frame: rgba(255, 255, 255, 0.85);
  --sms-on-media: #ffffff;
  --sms-print-ink: #000000;
  --sms-print-paper: #ffffff;
  --sms-print-line: #8a8a8a;
  --bs-body-bg: var(--sms-bg);
  --bs-body-bg-rgb: var(--sms-bg-rgb);
  --bs-body-color: var(--sms-text);
  --bs-emphasis-color: var(--sms-text);
  --bs-emphasis-color-rgb: var(--sms-text-rgb);
  --bs-body-color-rgb: var(--sms-text-rgb);
  --bs-secondary-bg-rgb: var(--sms-surface-2-rgb);
  --bs-tertiary-bg-rgb: var(--sms-surface-2-rgb);
  --bs-secondary-color-rgb: var(--sms-text-rgb);
  --bs-secondary-color: var(--sms-text-muted);
  --bs-tertiary-color: var(--sms-text-muted);
  --bs-secondary-bg: var(--sms-surface-2);
  --bs-tertiary-bg: var(--sms-surface-2);
  --bs-border-color: var(--sms-border);
  --bs-border-color-translucent: var(--sms-border);
  --bs-heading-color: var(--sms-text);
  --bs-link-color: var(--sms-primary);
  --bs-link-color-rgb: var(--sms-primary-rgb);
  --bs-link-hover-color: var(--sms-primary-hover);
  --bs-link-hover-color-rgb: var(--sms-primary-rgb);
  --bs-body-font-family: var(--sms-font-sans);
  --bs-body-font-size: var(--sms-text-base);
  --bs-body-font-weight: var(--sms-weight-regular);
  --bs-body-line-height: var(--sms-leading-normal);
  --bs-border-radius: var(--sms-radius-sm);
  --bs-border-radius-sm: var(--sms-radius-sm);
  --bs-border-radius-lg: var(--sms-radius-lg);
  --bs-border-radius-xl: var(--sms-radius-lg);
  --bs-box-shadow: var(--sms-shadow-md);
  --bs-box-shadow-sm: var(--sms-shadow-sm);
  --bs-box-shadow-lg: var(--sms-shadow-lg);
  --bs-focus-ring-color: rgba(var(--sms-primary-rgb), 0.28);

  --bs-primary: var(--sms-primary);
  --bs-primary-rgb: var(--sms-primary-rgb);
  --bs-primary-bg-subtle: var(--sms-primary-subtle);
  --bs-primary-border-subtle: var(--sms-primary-border);
  --bs-primary-text-emphasis: var(--sms-primary);
  --bs-secondary: var(--sms-neutral);
  --bs-secondary-rgb: var(--sms-neutral-rgb);
  --bs-secondary-bg-subtle: var(--sms-surface-2);
  --bs-secondary-border-subtle: var(--sms-border);
  --bs-secondary-text-emphasis: var(--sms-text-muted);
  --bs-success: var(--sms-success);
  --bs-success-rgb: var(--sms-success-rgb);
  --bs-success-bg-subtle: var(--sms-success-subtle);
  --bs-success-border-subtle: var(--sms-success-border);
  --bs-success-text-emphasis: var(--sms-success);
  --bs-warning: var(--sms-warning);
  --bs-warning-rgb: var(--sms-warning-rgb);
  --bs-warning-bg-subtle: var(--sms-warning-subtle);
  --bs-warning-border-subtle: var(--sms-warning-border);
  --bs-warning-text-emphasis: var(--sms-warning);
  --bs-danger: var(--sms-danger);
  --bs-danger-rgb: var(--sms-danger-rgb);
  --bs-danger-bg-subtle: var(--sms-danger-subtle);
  --bs-danger-border-subtle: var(--sms-danger-border);
  --bs-danger-text-emphasis: var(--sms-danger);
  --bs-info: var(--sms-info);
  --bs-info-rgb: var(--sms-info-rgb);
  --bs-info-bg-subtle: var(--sms-info-subtle);
  --bs-info-border-subtle: var(--sms-info-border);
  --bs-info-text-emphasis: var(--sms-info);
  --bs-light: var(--sms-surface-2);
  --bs-light-rgb: var(--sms-surface-2-rgb);
  --bs-light-bg-subtle: var(--sms-surface-2);
  --bs-light-text-emphasis: var(--sms-text);
  --bs-dark: var(--sms-text);
  --bs-dark-rgb: var(--sms-text-rgb);
  --bs-dark-bg-subtle: var(--sms-surface-2);
  --bs-dark-text-emphasis: var(--sms-text);
  --bs-white: var(--sms-surface);
  --bs-white-rgb: var(--sms-surface-rgb);
  --bs-form-valid-color: var(--sms-success);
  --bs-form-valid-border-color: var(--sms-success);
  --bs-form-invalid-color: var(--sms-danger);
  --bs-form-invalid-border-color: var(--sms-danger);

  --clr-primary: var(--sms-primary);
  --clr-primary-dark: var(--sms-primary-hover);
  --clr-primary-light: var(--sms-primary-subtle);
  --clr-success: var(--sms-success);
  --clr-warning: var(--sms-warning);
  --clr-danger: var(--sms-danger);
  --clr-info: var(--sms-info);
  --clr-dark: var(--sms-text);
  --clr-muted: var(--sms-text-muted);
  --clr-border: var(--sms-border);
  --clr-bg: var(--sms-bg);
  --clr-surface: var(--sms-surface);
  --primary: var(--sms-primary);
  --primary-dark: var(--sms-primary-hover);
  --primary-light: var(--sms-primary-subtle);
  --secondary: var(--sms-neutral);
  --success: var(--sms-success);
  --warning: var(--sms-warning);
  --danger: var(--sms-danger);
  --info: var(--sms-info);
  --border: var(--sms-border);
  --surface: var(--sms-surface);
  --surface-2: var(--sms-surface-2);
  --bg: var(--sms-bg);
  --muted: var(--sms-text-muted);
  --text: var(--sms-text);
  --font-base: var(--sms-font-sans);
  --font-size-sm: var(--sms-text-sm);
  --font-size-base: var(--sms-text-base);
  --text-xs: var(--sms-text-xs);
  --text-sm: var(--sms-text-sm);
  --text-base: var(--sms-text-base);
  --text-lg: var(--sms-text-lg);
  --text-xl: var(--sms-text-xl);
  --fw-regular: var(--sms-weight-regular);
  --fw-medium: var(--sms-weight-medium);
  --fw-semi: var(--sms-weight-semibold);
  --fw-bold: var(--sms-weight-bold);
  --sp-1: var(--sms-space-1);
  --sp-2: var(--sms-space-2);
  --sp-3: var(--sms-space-3);
  --sp-4: var(--sms-space-4);
  --sp-5: var(--sms-space-5);
  --sp-6: var(--sms-space-6);
  --sp-8: var(--sms-space-8);
  --space-xs: var(--sms-space-1);
  --space-sm: var(--sms-space-2);
  --space-md: var(--sms-space-4);
  --space-lg: var(--sms-space-6);
  --space-xl: var(--sms-space-8);
  --r-sm: var(--sms-radius-sm);
  --r-md: var(--sms-radius-md);
  --r-lg: var(--sms-radius-lg);
  --r-xl: var(--sms-radius-lg);
  --radius-sm: var(--sms-radius-sm);
  --radius-md: var(--sms-radius-md);
  --radius-lg: var(--sms-radius-lg);
  --radius-pill: var(--sms-radius-pill);
  --shadow-sm: var(--sms-shadow-sm);
  --shadow-md: var(--sms-shadow-md);
  --shadow-lg: var(--sms-shadow-lg);
  --shadow-card: var(--sms-shadow-sm);
  --shadow-primary: var(--sms-shadow-sm);
  --transition: all var(--sms-duration-base) var(--sms-ease);
  --transition-fast: var(--sms-duration-fast) var(--sms-ease);
  --transition-base: var(--sms-duration-base) var(--sms-ease);
  --transition-slow: var(--sms-duration-base) var(--sms-ease);
  --transition-spring: var(--sms-duration-base) var(--sms-ease);
}