:root {
  /* ─── Background Colors ─── */
  --bg-primary:     #050505;
  --bg-secondary:   #080808;
  --bg-surface:     #0c0c0c;
  --bg-card:        #0f0f0f;
  --bg-elevated:    #161616;

  /* ─── Text Colors ─── */
  --text-primary:   #f0f0f2;
  --text-secondary: #9898a8;
  --text-muted:     #505060;
  --text-inverse:   #050505;

  /* ─── Brand Colors — SILVER / BLACK / WHITE only ─── */
  --steel-blue:     #b8bec8;
  --steel-blue-dim: #6e7880;
  --steel-blue-glow:rgba(184, 190, 200, 0.12);
  --gold:           #d0d4dc;
  --gold-dim:       #8890a0;
  --gold-glow:      rgba(200, 208, 220, 0.16);
  --silver:         #e0e4ec;
  --silver-bright:  #f2f4f8;
  --iron:           #2c2c2c;

  /* ─── Border ─── */
  --border-subtle:  rgba(180, 188, 200, 0.1);
  --border-card:    rgba(180, 188, 200, 0.2);
  --border-glow:    rgba(210, 218, 228, 0.55);

  /* ─── Gradients — silver metallic only ─── */
  --gradient-steel:  linear-gradient(135deg, #181818 0%, #0f0f0f 50%, #181818 100%);
  --gradient-card:   linear-gradient(145deg, #111111 0%, #0d0d0d 100%);
  --gradient-gold:   linear-gradient(90deg, #606870 0%, #b0b8c4 30%, #e0e4ec 55%, #b0b8c4 75%, #606870 100%);
  --gradient-silver: linear-gradient(135deg, #606870 0%, #b0b8c4 35%, #e0e4ec 55%, #b0b8c4 75%, #505860 100%);
  --gradient-hero:   linear-gradient(135deg, #050505 0%, #0a0a0a 60%, #080808 100%);
  --gradient-shimmer:linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%);

  /* ─── Shadows ─── */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.8);
  --shadow-hover:   0 12px 40px rgba(180, 190, 200, 0.14), 0 4px 16px rgba(0,0,0,0.7);
  --shadow-gold:    0 8px 32px rgba(180, 190, 200, 0.2);
  --shadow-glow:    0 0 30px rgba(180, 190, 200, 0.18);
  --shadow-silver:  0 0 40px rgba(200, 210, 220, 0.15);

  /* ─── Typography ─── */
  --font-arabic:    'Cairo', 'Segoe UI', sans-serif;
  --font-english:   'Inter', 'Segoe UI', sans-serif;
  --font-display:   'Cairo', 'Inter', sans-serif;

  /* ─── Spacing ─── */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 5rem;
  --space-4xl: 8rem;

  /* ─── Border Radius ─── */
  --radius-sm:  6px;
  --radius-md:  10px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full:9999px;

  /* ─── Transitions ─── */
  --transition-fast:  0.18s ease;
  --transition-base:  0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:  0.5s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring:0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Navbar ─── */
  --nav-height: 80px;

  /* ─── Z-index ─── */
  --z-base:    1;
  --z-sticky:  100;
  --z-overlay: 200;
  --z-modal:   300;
  --z-toast:   400;
}