:root {
  --color-navy: #0f2557;
  --color-navy-dark: #0a1a3f;
  --color-electric: #2563eb;
  --color-electric-light: #3b82f6;
  --color-gold: #d4a853;
  --color-gold-light: #f4d03f;
  --color-emerald: #10b981;
  --color-emerald-light: #34d399;
  --color-charcoal: #1e293b;
  --color-gray: #64748b;
  --color-light: #f8fafc;
  --color-white: #ffffff;
  --color-border: #e2e8f0;

  --gradient-primary: linear-gradient(135deg, #0f2557 0%, #2563eb 100%);
  --gradient-gold: linear-gradient(135deg, #d4a853 0%, #f4d03f 100%);
  --gradient-emerald: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --gradient-hero: linear-gradient(135deg, #0a1a3f 0%, #0f2557 50%, #1e3a8a 100%);
  --gradient-card: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, rgba(212, 168, 83, 0.05) 100%);

  --shadow-sm: 0 2px 4px rgba(15, 37, 87, 0.06);
  --shadow-md: 0 4px 12px rgba(15, 37, 87, 0.08);
  --shadow-lg: 0 10px 30px rgba(15, 37, 87, 0.12);
  --shadow-xl: 0 20px 50px rgba(15, 37, 87, 0.18);
  --shadow-glow: 0 0 30px rgba(37, 99, 235, 0.3);
  --shadow-gold: 0 10px 30px rgba(212, 168, 83, 0.25);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 999px;

  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  --font-primary: 'Cairo', system-ui, sans-serif;
  --font-secondary: 'Tajawal', system-ui, sans-serif;

  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

  --z-header: 100;
  --z-modal: 1000;
  --z-floating: 999;
}