/* ==========================================================================
   Design System — أكاديمية النبراس
   اللوحة مأخوذة حصريًا من بوسترات الأكاديمية: بنفسجي + لافندر + أبيض.
   لا يوجد ذهبي ولا أي لون خارج البوسترات.
   ========================================================================== */
:root{
  /* ---------- البنفسجي (من عناوين البوسترات وشرائطها) ---------- */
  --purple-950:#3A1C60;   /* أغمق درجة — عناوين رئيسية */
  --purple-900:#4A2578;   /* «اسعار الباقات» */
  --purple-800:#5B3390;
  --purple-700:#6B4494;   /* حبّة «السعر» الداكنة */
  --purple-600:#7E57AB;   /* الأساسي — الأزرار والشرائط */
  --purple-500:#8E6BBD;
  --purple-400:#A186C4;
  --purple-300:#BCA5D8;

  /* ---------- اللافندر (خلفيات البوسترات) ---------- */
  --lav-300:#D9C7EC;      /* حدود */
  --lav-200:#E9DCF5;      /* تعبئة */
  --lav-100:#F2EAFA;      /* خلفية قسم */
  --lav-050:#F8F4FC;      /* أفتح */
  --paper:#FBF9FE;        /* سطح البطاقات */
  --white:#FFFFFF;

  /* ---------- النص ---------- */
  --ink:#3A1C60;          /* عناوين */
  --ink-body:#54436B;     /* نص عادي */
  --ink-soft:#7B6B91;     /* نص ثانوي */
  --ink-invert:#F6F1FB;   /* نص على بنفسجي */

  /* ---------- الأدوار ---------- */
  --color-primary:var(--purple-600);
  --color-primary-dark:var(--purple-900);
  --color-lavender:var(--lav-100);
  --color-white:var(--white);
  --color-text:var(--ink-body);
  --color-border:var(--lav-300);

  /* ---------- تدرّج الخلفية (نفس إحساس البوسترات) ---------- */
  --grad-page:linear-gradient(165deg,#F4ECFB 0%,#FBF9FE 38%,#F7F1FC 62%,#EFE4F8 100%);
  --grad-soft:linear-gradient(170deg,#FBF9FE 0%,#F3EBFA 100%);
  --grad-lav:linear-gradient(165deg,#F2EAFA 0%,#E9DCF5 100%);
  --grad-deep:linear-gradient(160deg,#5B3390 0%,#4A2578 55%,#3A1C60 100%);

  /* ---------- إشارة التقييم ---------- */
  /* مستمدة من منشور الإشارة الضوئية عندهم (🟢🟡🔴).
     كل لون درجة حقيقية من لونه: الأحمر أحمر والأصفر أصفر، لا طوبي ولا خردلي،
     ومضبوطة على نفس نطاق التشبّع حتى تبدو الثلاثة طقمًا واحدًا.
     الأصفر أصفر صريح (تدرّج 47°) وليس ذهبيًا. */
  --signal-green:#2E9E68;   /* HSL 151 · 55% · 40% */
  --signal-amber:#E8BE22;   /* HSL  47 · 74% · 52% */
  --signal-red:#CE3B32;     /* HSL   4 · 61% · 50% */

  /* درجات داكنة من الألوان نفسها (نفس التدرّج بالضبط) — لنص الشارة، لضمان التباين */
  --signal-green-ink:#1B5F3E;
  --signal-amber-ink:#7C610E;
  --signal-red-ink:#7E211B;

  /* ---------- المقاس ---------- */
  --container:1140px;
  --container-narrow:760px;
  --gutter:clamp(1.25rem,5vw,2.5rem);

  /* ---------- الزوايا (هادئة، بأسلوب آبل) ---------- */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:30px;
  --r-pill:980px;

  /* ---------- المسافات ---------- */
  --section:clamp(3rem,6vw,5.5rem);
  --section-sm:clamp(2rem,4vw,3.25rem);
  --stack:1.5rem;

  /* ---------- الظل: خفيف جدًا، وللبطاقات فقط ---------- */
  --shadow-card:0 1px 2px rgba(58,28,96,.04), 0 8px 24px rgba(58,28,96,.05);
  --shadow-lift:0 2px 4px rgba(58,28,96,.05), 0 16px 40px rgba(58,28,96,.09);

  /* ---------- الحركة ---------- */
  --ease:cubic-bezier(.25,.1,.25,1);
  --ease-out:cubic-bezier(.22,1,.36,1);
  --t-fast:180ms;
  --t-base:320ms;
  --t-slow:600ms;

  /* ---------- الطبقات ---------- */
  --z-header:100;
  --z-float:110;
  --z-drawer:120;

  --font:'Almarai',system-ui,-apple-system,'Segoe UI',sans-serif;
  --header-h:64px;
}

@media (min-width:1024px){
  :root{ --header-h:72px; }
}