:root {
  /* ═══════════════════════════════════════════════
     نظام التصميم — أكاديمية رافد الرقمية · إصدار 2026
     هوية رافد الرسمية · كحلي عميق + فولاذي + أبيض بارد
     أحادية اللون مستمدّة من الشعار · ثيم فاتح · RTL
     الأسماء (--blue / --gray / --orange) محفوظة لتوافق القوالب،
     لكن كل قيم "orange" أُعيد تعيينها إلى الفولاذي المميّز.
     ═══════════════════════════════════════════════ */

  /* ── الكحلي (مستمدّ من صورة الهيرو · #050c29) ── */
  --rafed-hero-bg: #050c29;
  --blue-50:  #e8f0fa;
  --blue-100: #c5d8ef;
  --blue-200: #8aaad9;
  --blue-300: #4a76c0;
  --blue-400: #2a56ad;
  --blue-500: #1e4098;
  --blue-600: #163282;
  --blue-700: #0f2568;
  --blue-800: #0a1852;
  --blue-900: #050c29;

  /* ── محايد بارد (رمادي مزرق هادئ) ── */
  --gray-50:  #f4f7fa;
  --gray-100: #e9eef4;
  --gray-200: #d8e0ea;
  --gray-300: #bfcad8;
  --gray-400: #92a1b4;
  --gray-500: #66758a;
  --gray-600: #4b5868;
  --gray-700: #36414e;
  --gray-800: #232b35;
  --gray-900: #131820;

  /* ── الفولاذي الفاتح المميّز (متناغم مع كحلي الهيرو) ── */
  --orange-50:  var(--blue-50);
  --orange-100: var(--blue-100);
  --orange-200: var(--blue-200);
  --orange-300: var(--blue-300);
  --orange-400: #3d6ec8;
  --orange-500: var(--blue-400);
  --orange-600: var(--blue-500);
  --orange-700: var(--blue-600);
  --orange-800: var(--blue-700);

  /* ── معدني الاعتماد (فضّي–فولاذي · لمسة فاخرة) ── */
  --gold-400: var(--blue-300);
  --gold-500: var(--blue-400);
  --gold-600: var(--blue-500);

  /* ── دلالات الحالة (هادئة ومتناغمة مع الكحلي) ── */
  --green-50:  #e6f1ee;
  --green-100: #c4e2da;
  --green-500: #1b8a6b;
  --green-600: #14705a;
  --green-700: #0f5544;
  --red-50:    #fbeceb;
  --red-100:   #f6d3cf;
  --red-500:   #c8463a;
  --red-600:   #a8352b;
  --red-700:   #842821;
  --amber-50:  #f1efe6;
  --amber-100: #e0dcc8;
  --amber-500: #8a7a52;
  --amber-700: #66592f;

  --white: #ffffff;

  /* ── الرموز الدلالية ── */
  --color-bg: #eef2f7;          /* أبيض بارد — الخلفية الأساسية */
  --color-bg-soft: #f6f9fc;     /* أبيض مزرق فاتح جداً */
  --color-surface: var(--white);
  --color-surface-2: #f4f7fb;
  --color-surface-elevated: var(--white);
  --color-primary: var(--blue-500);
  --color-primary-hover: var(--blue-600);
  --color-primary-light: var(--blue-400);
  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-600);
  --color-accent-soft: var(--orange-400);
  --color-text: #0a1852;
  --color-text-muted: #4a6288;
  --color-heading: var(--blue-800);
  --color-border: #dde5ee;
  --color-border-strong: #c5d2e0;
  --color-ring: color-mix(in srgb, var(--orange-500) 38%, transparent);

  /* ── التدرّجات ── */
  --gradient-hero: linear-gradient(155deg, #050c29 0%, #0a1852 48%, #0f2568 100%);
  --gradient-primary: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-800) 100%);
  --gradient-primary-soft: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-700) 100%);
  --gradient-accent: linear-gradient(135deg, var(--blue-400) 0%, var(--orange-400) 45%, var(--blue-600) 100%);
  --gradient-navy: linear-gradient(150deg, #050c29 0%, #040922 100%);
  --gradient-card: var(--white);
  --gradient-gold: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  --gradient-warm: linear-gradient(135deg, var(--blue-500), var(--orange-500));

  /* ── الخطوط (مؤسسي عربي) ── */
  --font-family: 'IBM Plex Sans Arabic', 'Readex Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-base: 0.95rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.3rem;
  --fs-2xl: 1.65rem;
  --fs-3xl: 2.15rem;
  --fs-4xl: 2.85rem;

  /* ── الزوايا ── */
  --radius-sm: 0.35rem;
  --radius-md: 0.55rem;
  --radius-lg: 0.8rem;
  --radius-xl: 1.1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 999px;

  /* ── الظلال (كحلية باردة) ── */
  --shadow-xs: 0 1px 2px rgb(16 32 51 / 0.06);
  --shadow-sm: 0 1px 3px rgb(16 32 51 / 0.08), 0 1px 2px rgb(16 32 51 / 0.04);
  --shadow-md: 0 6px 16px -4px rgb(16 32 51 / 0.12), 0 2px 6px -2px rgb(16 32 51 / 0.07);
  --shadow-lg: 0 16px 36px -10px rgb(10 27 44 / 0.20), 0 6px 14px -6px rgb(10 27 44 / 0.10);
  --shadow-xl: 0 30px 64px -20px rgb(10 27 44 / 0.34);
  --shadow-orange: 0 10px 24px -6px rgb(47 116 182 / 0.38);
  --shadow-primary: 0 10px 24px -6px rgb(15 37 104 / 0.36);

  /* ── الارتفاع البصري ── */
  --hairline: inset 0 0 0 1px color-mix(in srgb, var(--blue-900) 7%, transparent);
  --hairline-strong: inset 0 0 0 1px color-mix(in srgb, var(--blue-900) 11%, transparent);
  --elevation-1: 0 1px 2px rgb(16 32 51 / 0.05), 0 3px 8px -3px rgb(16 32 51 / 0.08);
  --elevation-2: 0 3px 6px -2px rgb(16 32 51 / 0.08), 0 12px 28px -8px rgb(16 32 51 / 0.14);
  --elevation-3: 0 8px 18px -6px rgb(16 32 51 / 0.14), 0 24px 48px -16px rgb(10 27 44 / 0.24);
  --card-lift: -6px;

  /* ── أبعاد ── */
  --topbar-height: 0;
  --header-height: 7.35rem;
  --sidebar-width: 17.5rem;
  --content-max: 1280px;
  --page-gutter: clamp(0.85rem, 3.5vw, 1.5rem);
  --transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.36s cubic-bezier(0.34, 1.2, 0.4, 1);

  /* ── نقاط التوقف (استجابة) ── */
  --bp-xs: 420px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* ── safe area (أجهزة بناقّة) ── */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-inline: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));
}

@media (max-width: 1024px) {
  :root { --header-height: 5.35rem; }
}

@media (max-width: 768px) {
  :root { --header-height: 4.95rem; }
}

@media (max-width: 480px) {
  :root { --header-height: 4.65rem; }
}