:root {
  color-scheme: light;

  --color-primary-50: #eff6ff;
  --color-primary-100: #dbeafe;
  --color-primary-200: #bfdbfe;
  --color-primary-300: #93c5fd;
  --color-primary-400: #60a5fa;
  --color-primary-500: #3b82f6;
  --color-primary-600: #2563eb;
  --color-primary-700: #1d4ed8;
  --color-primary-800: #1e40af;
  --color-primary-900: #1e3a8a;
  --color-primary: var(--color-primary-700);
  --color-primary-hover: var(--color-primary-800);
  --color-secondary: #0f766e;
  --color-secondary-soft: #ccfbf1;
  --color-accent: #f59e0b;
  --color-accent-soft: #fef3c7;

  --color-background: #f8fafc;
  --color-background-alt: #f1f5f9;
  --color-surface: #ffffff;
  --color-surface-elevated: #ffffff;
  --color-surface-muted: #f8fafc;
  --color-card: #ffffff;
  --color-overlay: rgb(15 23 42 / 0.66);
  --color-text-primary: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;
  --color-border: #e2e8f0;
  --color-border-strong: #cbd5e1;
  --color-success: #15803d;
  --color-success-soft: #dcfce7;
  --color-warning: #b45309;
  --color-warning-soft: #fef3c7;
  --color-error: #b91c1c;
  --color-error-soft: #fee2e2;
  --color-info: #0369a1;
  --color-info-soft: #e0f2fe;

  --gradient-hero: radial-gradient(circle at 84% 10%, rgb(37 99 235 / 0.12), transparent 31%), radial-gradient(circle at 8% 65%, rgb(15 118 110 / 0.08), transparent 28%);
  --gradient-dark-panel: linear-gradient(145deg, #172554 0%, #0f172a 60%, #134e4a 140%);

  --font-sans: "Manrope", "Noto Sans Arabic", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-arabic: "Noto Sans Arabic", "Manrope", sans-serif;
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-lg: 1.125rem;
  --font-size-xl: 1.25rem;
  --font-size-2xl: 1.5rem;
  --font-size-3xl: clamp(1.75rem, 3.4vw, 2.25rem);
  --font-size-4xl: clamp(2.05rem, 4.6vw, 3.7rem);
  --line-height-tight: 1.12;
  --line-height-snug: 1.35;
  --line-height-normal: 1.65;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --section-spacing: clamp(3.25rem, 7vw, 5.25rem);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-2xl: 2rem;
  --radius-pill: 9999px;

  --shadow-xs: 0 1px 2px rgb(15 23 42 / 0.04);
  --shadow-sm: 0 3px 10px rgb(15 23 42 / 0.06);
  --shadow-md: 0 12px 30px rgb(15 23 42 / 0.09);
  --shadow-lg: 0 28px 60px rgb(15 23 42 / 0.13);
  --shadow-primary: 0 14px 32px rgb(37 99 235 / 0.24);

  --container-sm: 42rem;
  --container-md: 56rem;
  --container-lg: 72rem;
  --container-xl: 80rem;
  --container-2xl: 90rem;
  --container-padding: clamp(1rem, 4vw, 2rem);

  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 450ms cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-sticky: 30;
  --z-dropdown: 40;
  --z-overlay: 50;
  --z-modal: 60;
  --z-toast: 70;
}

[data-theme="dark"] {
  color-scheme: dark;
  --color-primary-50: #172554;
  --color-primary-100: #1e3a8a;
  --color-primary-200: #1e40af;
  --color-primary-300: #3b82f6;
  --color-primary-400: #60a5fa;
  --color-primary-500: #60a5fa;
  --color-primary-600: #3b82f6;
  --color-primary-700: #60a5fa;
  --color-primary-800: #93c5fd;
  --color-primary-900: #dbeafe;
  --color-primary: #60a5fa;
  --color-primary-hover: #93c5fd;
  --color-secondary: #2dd4bf;
  --color-secondary-soft: #143c3a;
  --color-accent: #fbbf24;
  --color-accent-soft: #422f0e;
  --color-background: #080d18;
  --color-background-alt: #0c1322;
  --color-surface: #111a2c;
  --color-surface-elevated: #162136;
  --color-surface-muted: #0d1626;
  --color-card: #111a2c;
  --color-overlay: rgb(2 6 23 / 0.82);
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #b8c3d3;
  --color-text-muted: #8e9caf;
  --color-text-inverse: #07101f;
  --color-border: #243148;
  --color-border-strong: #33445e;
  --color-success: #4ade80;
  --color-success-soft: #12351f;
  --color-warning: #fbbf24;
  --color-warning-soft: #3b2d10;
  --color-error: #f87171;
  --color-error-soft: #3c171b;
  --color-info: #38bdf8;
  --color-info-soft: #0b2e43;
  --gradient-hero: radial-gradient(circle at 84% 10%, rgb(59 130 246 / 0.16), transparent 31%), radial-gradient(circle at 8% 65%, rgb(45 212 191 / 0.08), transparent 28%);
  --gradient-dark-panel: linear-gradient(145deg, #172554 0%, #0b1220 60%, #123b3a 140%);
  --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.18);
  --shadow-sm: 0 3px 12px rgb(0 0 0 / 0.2);
  --shadow-md: 0 14px 36px rgb(0 0 0 / 0.26);
  --shadow-lg: 0 30px 70px rgb(0 0 0 / 0.34);
  --shadow-primary: 0 14px 34px rgb(59 130 246 / 0.22);
}