/* ==========================================================================
   variables.css
   متغيرات التصميم (Design Tokens) — الألوان، الخطوط، المسافات، الظلال
   عدّل القيم هنا وهتتغيّر في كل الموقع تلقائياً
   ========================================================================== */

:root {
  /* ---------- الألوان الأساسية ---------- */
  --color-navy: #042540;
  --color-navy-light: #0a3a63;
  --color-blue: #1e5aa8;
  --color-blue-light: #2f74cc;
  --color-yellow: #ffd700;
  --color-yellow-dark: #e6c200;
  --color-gray: #f5f5f5;
  --color-white: #ffffff;

  /* ---------- ألوان النصوص ---------- */
  --color-text: #1e293b;
  --color-muted: #64748b;

  /* ---------- الخطوط ---------- */
  --font-body: "Cairo", sans-serif;
  --font-display: "Poppins", "Cairo", sans-serif;

  /* ---------- المسافات (Spacing) ---------- */
  --container-width: 1280px;
  --section-padding-y: 5rem;
  --section-padding-y-sm: 3.5rem;
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* ---------- الظلال ---------- */
  --shadow-brand: 0 10px 30px -10px rgba(4, 37, 64, 0.15);
  --shadow-brand-lg: 0 25px 50px -12px rgba(4, 37, 64, 0.25);

  /* ---------- سرعة الحركة (Transitions) ---------- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
}