/* =====================================================================
   سي ليفل دار: الرموز التصميمية للموقع (tokens.css)
   12 أكتوبر 2026 · الإصدار 1.0 للمراجعة
   ---------------------------------------------------------------------
   ثلاثة ألوان وخطان مثبّتان من المستخدم. كل ما عداهما قرار تنفيذي
   موثق في START-HERE.md وDESIGN.md ويقبل التعديل.
   الملف لا يفترض إطار عمل؛ يُستورد قبل base.css وcomponents.css.
   ===================================================================== */

/* ---------- الخطوط المحلية ---------- */
@font-face { font-family: "Alexandria"; src: url("assets/fonts/Alexandria-variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Sora"; src: url("assets/fonts/Sora-variable.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* ===== 1. ألوان الهوية (قرار مثبّت) ===== */
  --cld-burgundy: #451C2A;
  --cld-stone: #B8B0A2;
  --cld-light: #E9E9E5;

  /* ===== 2. مشتقات تشغيلية (قرار تنفيذي) ===== */
  --cld-burgundy-deep: #35141F;            /* تمرير وضغط على الأسطح البرغندية */
  --cld-burgundy-tint: rgba(69, 28, 42, .08);        /* تمرير خفيف على الفاتح */
  --cld-burgundy-tint-strong: rgba(69, 28, 42, .14); /* ضغط على الفاتح */
  --cld-stone-soft: #D0CCC3;               /* الحجري ممزوجًا بالفاتح: خطوط خفيفة وأسطح معطّلة */
  --cld-white: #FFFFFF;                     /* ورق الحقول والبطاقات؛ ليس لون هوية */
  --cld-ink: #3A2F33;                       /* حبر النص الطويل: 10.6 إلى 1 على الفاتح */
  --cld-ink-2: #6B4A54;                     /* نص ثانوي: 6.3 إلى 1 على الفاتح */
  --cld-ink-3: #8A6E78;                     /* نص معطّل وحدود الحقول: 3.8 على الفاتح، 4.6 على الأبيض */
  --cld-error: #8E2B2B;                     /* خطأ: 6.8 على الفاتح، 8.3 على الأبيض */
  --cld-success: #2B6A45;                   /* نجاح: 5.3 على الفاتح، 6.5 على الأبيض */

  /* ===== 3. أدوار الألوان ===== */
  --surface-page: var(--cld-light);
  --surface-raised: var(--cld-white);
  --surface-stone: var(--cld-stone);
  --surface-stone-soft: var(--cld-stone-soft);
  --surface-brand: var(--cld-burgundy);
  --surface-brand-deep: var(--cld-burgundy-deep);
  --surface-hover: var(--cld-burgundy-tint);
  --surface-active: var(--cld-burgundy-tint-strong);

  --text-heading: var(--cld-burgundy);
  --text-body: var(--cld-ink);
  --text-muted: var(--cld-ink-2);
  --text-disabled: var(--cld-ink-2);   /* على الحجري الناعم 4.8 إلى 1؛ التعطيل يُفهم من السطح والمؤشر */
  --text-link: var(--cld-burgundy);
  --text-on-brand: var(--cld-light);
  --text-muted-on-brand: var(--cld-stone);
  --text-on-stone: var(--cld-burgundy);

  --line-subtle: var(--cld-stone-soft);
  --line-strong: var(--cld-stone);
  --line-control: var(--cld-ink-3);
  --line-on-brand: rgba(233, 233, 229, .3);

  --focus-ring: var(--cld-burgundy);
  --focus-ring-on-brand: var(--cld-light);
  --state-error: var(--cld-error);
  --state-success: var(--cld-success);

  /* ===== 4. الخطوط ===== */
  --font-ar: "Alexandria", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Sora", "Alexandria", "Segoe UI", sans-serif;

  /* سلم متجاوب: الحد الأدنى عند 360 بكسل والأقصى عند 1440 تقريبًا */
  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4.5rem);     /* 40 → 72 */
  --fs-h1: clamp(2rem, 1.45rem + 2vw, 3.25rem);            /* 32 → 52 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2.375rem);      /* 26 → 38 */
  --fs-h3: clamp(1.25rem, 1.15rem + .45vw, 1.5rem);        /* 20 → 24 */
  --fs-lead: clamp(1.125rem, 1.05rem + .35vw, 1.375rem);   /* 18 → 22 */
  --fs-body: clamp(1.0625rem, 1.03rem + .15vw, 1.125rem);  /* 17 → 18 */
  --fs-small: .9375rem;                                    /* 15 */
  --fs-caption: .875rem;                                   /* 14 */
  --fs-numeral: clamp(2.5rem, 1.8rem + 2.6vw, 4rem);       /* 40 → 64 للأرقام الكبيرة */

  --lh-tight: 1.2;      /* الأرقام والعناوين الإنجليزية */
  --lh-heading: 1.35;   /* العناوين العربية: لا أقل من 1.25 */
  --lh-body: 1.8;
  --lh-small: 1.6;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --latin-inline: .95em;  /* حجم الإنجليزية داخل السطر العربي */
  --measure: 36em;        /* أقصى عرض لعمود النص */

  /* ===== 5. المسافات ===== */
  --space-1: .25rem;   /* 4 */
  --space-2: .5rem;    /* 8 */
  --space-3: .75rem;   /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */
  --section-y: clamp(3rem, 2rem + 4vw, 7rem);      /* المسافة الرأسية بين الأقسام */
  --band-y: clamp(2.5rem, 1.5rem + 3vw, 5rem);     /* الفواصل البرغندية أقصر من الأقسام */

  /* ===== 6. الشبكة ===== */
  --page-gutter: clamp(1rem, 6.25vw, 7.5rem);      /* هامش الهوية 6.25% بحد أقصى 120 بكسل */
  --container: 80rem;                              /* 1280 */
  --container-wide: 90rem;                         /* 1440 */
  --container-narrow: 46rem;                       /* 736 للنصوص الطويلة */
  --grid-gap: clamp(1rem, .6rem + 1.5vw, 2rem);    /* 16 → 32 */
  /* نقاط التحول (توثيق؛ تُكتب في الاستعلامات بالبكسل): 480، 768، 1024، 1280 */

  /* ===== 7. الأشكال والعمق ===== */
  --radius-s: 4px;     /* الأزرار والحقول والوسوم */
  --radius-m: 6px;     /* الصور واللوحات */
  --radius-l: 10px;    /* البطاقات الكبيرة والحوار */
  --border-w: 1px;
  --control-border-w: 1.5px;
  --shadow-overlay: 0 16px 40px rgba(28, 18, 22, .22);  /* الحوار والقوائم فقط */

  /* ===== 8. الحركة ===== */
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --ease-out: cubic-bezier(.2, .7, .2, 1);

  /* ===== 9. الطبقات ===== */
  --z-header: 100;
  --z-dialog: 1000;
  --z-toast: 1100;

  /* ===== 10. المكونات ===== */
  --control-h: 3rem;      /* 48: الأزرار والحقول */
  --control-h-s: 2.75rem; /* 44: الأزرار الصغيرة والمرشحات؛ أدنى هدف لمس */
  --control-px: 1.5rem;
  --header-h: 4.5rem;     /* 72 */
  --logo-h-header: 2.5rem;
}

/* سياق الأسطح البرغندية: تُطبّق على أي قسم خلفيته برغندية */
.on-brand {
  --text-heading: var(--cld-light);
  --text-body: var(--cld-light);
  --text-muted: var(--cld-stone);
  --text-link: var(--cld-light);
  --line-subtle: var(--line-on-brand);
  --line-strong: rgba(233, 233, 229, .45);
  --focus-ring: var(--cld-light);
  --surface-hover: rgba(233, 233, 229, .1);
  --surface-active: rgba(233, 233, 229, .18);
  background: var(--surface-brand);
  color: var(--text-body);
}

/* سياق الأسطح الحجرية */
.on-stone {
  --text-heading: var(--cld-burgundy);
  --text-body: var(--cld-burgundy);
  --text-muted: #5A4A50;      /* 3.9 إلى 1 على الحجري؛ للنص الكبير فقط */
  --line-subtle: rgba(69, 28, 42, .18);
  --line-strong: rgba(69, 28, 42, .35);
  --surface-hover: rgba(69, 28, 42, .08);
  background: var(--surface-stone);
  color: var(--text-body);
}

:root { --logo-symbol-color: #451C2A; --space-section: clamp(4rem, 6.5vw, 7.5rem); --wasl-stroke: .0941; }