/* ═══════════════════ CSS VARIABLES ═══════════════════ */
:root {
  /* Colors */
  --dark: #0C3547;
  --blue: #2E86AB;
  --teal: #3DBDB4;
  --teal-light: #5DD4CB;
  --teal-dark: #2A9D95;
  --white: #FFFFFF;
  --gray-50: #F8FAFB;
  --gray-100: #E8EEF2;
  --gray-200: #D1DCE3;
  --gray-600: #4A6A7A;
  --gray-800: #0F2A3A;

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(12, 53, 71, 0.06);
  --shadow-md: 0 8px 30px rgba(12, 53, 71, 0.1);
  --shadow-lg: 0 20px 60px rgba(12, 53, 71, 0.15);
  --shadow-xl: 0 30px 80px rgba(12, 53, 71, 0.2);

  /* Border Radius */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Transition */
  --transition: 0.3s ease;

  /* Fonts */
  --font-ar: 'Cairo', sans-serif;
  --font-en: 'Plus Jakarta Sans', sans-serif;
}