:root {
  /* Brand Colors */
  --primary: #c0392b;
  --primary-dark: #96281b;
  --primary-light: #e74c3c;
  --gold: #d4a017;
  --gold-light: #f0c040;
  --dark: #0f1923;
  --dark-2: #1a2535;
  --dark-3: #243044;
  --text: #2c3e50;
  --text-muted: #6c7a89;
  --border: #e8ecf0;
  --bg: #f7f9fc;
  --white: #ffffff;

  /* Typography */
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Inter', sans-serif;

  /* Spacing */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;
  --shadow: 0 4px 20px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
  --shadow-xl: 0 24px 60px rgba(0,0,0,.18);
  --transition: all .25s cubic-bezier(.4,0,.2,1);

  /* Gradients */
  --grad-primary: linear-gradient(135deg, var(--primary-dark), var(--primary-light));
  --grad-gold: linear-gradient(135deg, #b8860b, var(--gold-light));
  --grad-dark: linear-gradient(135deg, var(--dark), var(--dark-3));
}