/* ============================================================
   مهد — Design Tokens
   Layer 1 primitive → Layer 2 semantic → Layer 3 component
   Theme: كحلي الهوية #0B1F3E على بيج فاتح #EFE7D7
          الذهبي/البرونز لمسة نادرة جدًا — لا يحمل بنية ولا يطغى
   ============================================================ */

/* ---------- Layer 1 — Primitive ---------- */
:root {
  /* Sand ramp — الخلفيات */
  --sand-50:  #FBF7EF;
  --sand-100: #F5EFE3;
  --sand-200: #EFE7D7;
  --sand-300: #E7DCC7;
  --sand-400: #DED2B9;
  --sand-500: #C6B79A;

  /* Navy ramp — لون الهوية الأساسي: العناوين والنصوص والأقسام والأزرار */
  --navy-900: #060F1F;   /* أعمق درجة — أقسام داكنة بديلة */
  --navy-800: #0B1F3E;   /* ★ كحلي الهوية — 13.35:1 على البيج */
  --navy-700: #1F3250;   /* متن النص — 10.48:1 */
  --navy-600: #334663;   /* نص ثانوي — 7.78:1 */
  --navy-500: #40536F;   /* نص خافت — 6.36:1 */
  --navy-400: #4D607B;   /* أخفت درجة نصية — 5.22:1 / 4.72:1 على البيج البديل */
  --navy-300: #8FA0B8;   /* زخرفي فقط — يرسب في تباين النصوص */

  /* الحبر الدافئ بقي للظلال فقط */
  --ink-shadow: 11, 31, 62;

  /* Gold / Bronze — لمسة مقتصدة: خط فاصل، أيقونة صغيرة، كلمة في عنوان */
  --gold-text: #8A6334;   /* كلمة العنوان المميّزة — 4.36:1 على البيج (الحد للنص الكبير 3:1) */
  --gold-deco: #A9814E;   /* خطوط وحدود زخرفية على البيج — لا نص */
  --gold-on-dark: #C6A06A; /* لمسة على الكحلي — 6.75:1 */
  --gold-faint: #DCC199;

  /* Support */
  --white: #FFFFFF;
  --danger-600: #A3402F;
  --success-600: #4A6B43;

  /* Type scale — 1.25 major third, fluid */
  --fs-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.82rem);
  --fs-sm:   clamp(0.875rem, 0.85rem + 0.15vw, 0.94rem);
  --fs-base: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
  --fs-md:   clamp(1.08rem, 1.02rem + 0.3vw, 1.22rem);
  --fs-lg:   clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --fs-xl:   clamp(1.6rem, 1.35rem + 1.15vw, 2.2rem);
  --fs-2xl:  clamp(2rem, 1.55rem + 2.1vw, 3rem);
  --fs-3xl:  clamp(2.4rem, 1.7rem + 3.2vw, 3.9rem);
  --fs-4xl:  clamp(2.8rem, 1.75rem + 4.6vw, 5rem);

  --lh-tight: 1.28;
  --lh-head:  1.42;   /* العربية تحتاج تنفّسًا أكثر من اللاتينية */
  --lh-body:  1.85;

  --fw-light: 300;
  --fw-reg:   400;
  --fw-med:   500;   /* Almarai بلا 500 — يُرسم 400 دون تسمين صناعي */
  --fw-semi:  600;
  --fw-bold:  700;

  /* Spacing — spacious (density 3/10) */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.25rem;
  --space-xl:  3.5rem;
  --space-2xl: 5rem;
  --space-3xl: 7rem;
  --space-4xl: 9.5rem;

  /* Radii — هادئة، بلا انحناءات مبالغة */
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* Shadows — ناعمة جدًا، بظلّ كحلي لا رمادي */
  --shadow-xs: 0 1px 2px rgba(11, 31, 62, .07);
  --shadow-sm: 0 2px 8px -2px rgba(11, 31, 62, .12);
  --shadow-md: 0 10px 28px -14px rgba(11, 31, 62, .30);
  --shadow-lg: 0 26px 60px -28px rgba(11, 31, 62, .36);
  --shadow-cta: 0 14px 34px -16px rgba(11, 31, 62, .55);

  /* Motion */
  --ease-out:   cubic-bezier(.2, .8, .2, 1);
  --ease-in:    cubic-bezier(.6, .04, .98, .5);
  --ease-swift: cubic-bezier(.3, .7, .2, 1);
  --dur-fast:   160ms;
  --dur-base:   240ms;
  --dur-slow:   380ms;
  --dur-reveal: 800ms;

  /* Layering */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 100;
  --z-overlay: 900;
  --z-modal: 1000;

  /* Layout */
  --container: 1280px;
  --container-narrow: 72ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --header-h: 76px;

  /* Fonts */
  --font-head: "Kufam", system-ui, sans-serif;
  --font-body: "Almarai", system-ui, sans-serif;
  --font-en:   "Cormorant Garamond", Georgia, serif;
}

/* ---------- Layer 2 — Semantic ---------- */
:root {
  --surface-page:    var(--sand-200);
  --surface-alt:     var(--sand-300);
  --surface-raised:  var(--sand-100);
  --surface-card:    var(--sand-50);
  --surface-inverse: var(--navy-800);

  --text-strong:  var(--navy-800);   /* العناوين */
  --text-body:    var(--navy-700);   /* المتن */
  --text-muted:   var(--navy-500);
  --text-subtle:  var(--navy-400);
  --text-on-dark: var(--sand-100);
  --text-on-accent: var(--white);

  /* اللكنة البنيوية كحلية — الأزرار والروابط والأيقونات الدالّة كلها كحلي */
  --accent:        var(--navy-800);
  --accent-hover:  var(--navy-900);
  --accent-soft:   var(--navy-300);

  /* الذهبي: لمسة نادرة لا تحمل بنية.
     -text  = كلمة مميّزة في عنوان فقط (يجتاز التباين)
     -deco  = خط فاصل رفيع أو حد — لا نص إطلاقًا */
  --gold:       var(--gold-text);
  --gold-line:  var(--gold-deco);

  --border:        rgba(11, 31, 62, .16);
  --border-strong: rgba(11, 31, 62, .30);
  --border-faint:  rgba(11, 31, 62, .08);
  --border-on-dark: rgba(245, 239, 227, .18);

  --focus-ring: var(--navy-800);
}

/* ---------- Layer 3 — Component ---------- */
:root {
  --btn-radius: var(--radius-sm);
  --btn-pad-y: 0.95rem;
  --btn-pad-x: 2rem;
  --btn-font-size: var(--fs-base);
  --btn-font-weight: var(--fw-bold);

  --card-bg: var(--surface-card);
  --card-border: var(--border);
  --card-radius: var(--radius-md);
  --card-pad: clamp(1.5rem, 3vw, 2.25rem);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);

  --header-bg: rgba(239, 231, 215, .82);
  --header-border: var(--border-faint);

  --field-bg: var(--surface-card);
  --field-border: var(--border-strong);
  --field-radius: var(--radius-sm);
  --field-pad-y: 0.85rem;
  --field-pad-x: 1rem;

  --rule: 1px solid var(--border);
}

/* الأقسام الكحلية تقلب الدلالات بدل تخصيص كل مكوّن على حدة */
.on-dark {
  --surface-page: var(--navy-800);
  --surface-card: rgba(245, 239, 227, .06);
  --surface-raised: rgba(245, 239, 227, .09);
  --text-strong: var(--sand-100);
  --text-body: var(--sand-200);
  --text-muted: var(--sand-400);
  --text-subtle: var(--sand-500);
  --border: var(--border-on-dark);
  --border-strong: rgba(245, 239, 227, .32);
  --border-faint: rgba(245, 239, 227, .10);

  /* على الكحلي تنقلب اللكنة البنيوية إلى الكريمي، والنص فوقها كحلي */
  --accent: var(--sand-100);
  --accent-hover: var(--white);
  --accent-soft: rgba(245, 239, 227, .35);
  --text-on-accent: var(--navy-800);

  /* الذهبي هنا أفتح ليبقى مقروءًا كلمسة نادرة */
  --gold: var(--gold-on-dark);
  --gold-line: var(--gold-on-dark);

  --focus-ring: var(--sand-100);
}