/* =========================================================
   sultanhassan.com · نظام التصميم · tokens.css (v1، 8 أكتوبر 2026)
   الهوية: «ضوء الليل» (دليل البراند). ما فيه ولا لون جديد:
   كل الخطوط والشفافيات مشتقة من ألوان الهوية السبعة.
   الجوال أولاً، وتتغير الأحجام من 1024px وفوق.
   ========================================================= */

/* الخط: Alexandria من ملفاتنا (ثابت، 4 أوزان، مقصوص للعربي واللاتيني، ~22KB لكل وزن).
   اخترنا الثابت بدل المتغير: المتغير فيه تداخل خطوط في «لا» يطلع خط فاتح على البرتقالي. */
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Alexandria"; src: url("../fonts/alexandria-800.woff2") format("woff2"); font-weight: 800; font-display: swap; }

:root {
  /* ---------- الألوان (من الهوية بالحرف) ---------- */
  --c-bg:          #10100F;  /* الخلفية */
  --c-surface:     #1B1B1A;  /* البطاقات والأشرطة */
  --c-text:        #FFFFFF;  /* النص الأساسي */
  --c-text-2:      #CFC6BE;  /* النص الثانوي */
  --c-orange:      #E5843D;  /* الزر، والكلمة المهمة، والرابط، والرمز */
  --c-orange-glow: #EB964D;  /* hover الزر، والأرقام الكبيرة، وحلقة التركيز، ورسائل الخطأ */
  --c-orange-deep: #BC6330;  /* زخرفة بس، مو نص */
  --c-on-orange:   #10100F;  /* أي نص فوق البرتقالي. ممنوع الأبيض (2.73) */

  /* ---------- مشتقات (شفافيات من نفس الألوان) ---------- */
  --c-line:        rgba(207, 198, 190, .14);  /* فواصل وحدود البطاقات (زخرفة) */
  --c-line-strong: rgba(207, 198, 190, .50);  /* حدود الحقول والأزرار الثانوية: 3.6:1 على الخلفية */
  --c-fill-soft:   rgba(207, 198, 190, .08);  /* شارة «قريباً» وخلفيات هادية */
  --c-orange-tint: rgba(229, 132, 61, .12);   /* خلفية الخيار المختار */
  --c-overlay:     rgba(16, 16, 15, .88);     /* الهيدر الثابت فوق المحتوى */

  /* ---------- التوهج (واحد بس في كل شاشة) ---------- */
  --glow-photo: radial-gradient(closest-side,
      rgba(235,150,77,.95) 0%, rgba(229,132,61,.70) 32%,
      rgba(188,99,48,.30) 64%, rgba(188,99,48,0) 100%);
  --glow-soft: radial-gradient(closest-side,
      rgba(229,132,61,.30) 0%, rgba(229,132,61,.16) 45%,
      rgba(188,99,48,.05) 80%, rgba(188,99,48,0) 100%);

  /* ---------- الخط ---------- */
  --font: "Alexandria", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --w-display: 800;  --w-title: 800;  --w-sub: 700;  --w-label: 600;  --w-body: 500;

  /* أحجام الجوال (390px). تتغير تحت في media query */
  --fs-display: 32px;  --lh-display: 1.8;   /* H1 (Alexandria طويل: أقل من كذا يتقارب حبر السطرين) */
  --fs-h2:      26px;  --lh-h2:      1.7;
  --fs-h3:      20px;  --lh-h3:      1.8;
  --fs-lead:    18px;  --lh-lead:    1.85;
  --fs-body:    16px;  --lh-body:    1.85;
  --lh-body-loose: 1.95;   /* فقرات فيها أسطر حبرها قريب (مثل «متى تبدأ؟» في إنستقرام) */
  --fs-small:   14px;  --lh-small:   1.8;   /* أصغر نص في الموقع */
  --fs-btn:     16px;
  --fs-number:  80px;  --lh-number:  1.1;   /* الرقم الكبير (أرقام لاتينية) */

  /* ---------- المسافات: شبكة 8px ---------- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;  --s-5: 40px;
  --s-6: 48px;  --s-7: 56px;  --s-8: 64px;  --s-10: 80px; --s-12: 96px;
  --s-15: 120px; --s-16: 128px;

  --gutter:      24px;    /* هامش الصفحة على الجوال */
  --container:   1200px;  /* أقصى عرض للمحتوى */
  --section-y:   64px;    /* المسافة فوق وتحت كل قسم */
  --gap-title:   24px;    /* العنوان ← المحتوى */
  --gap-group:   16px;    /* بين عناصر المجموعة الوحدة */
  --gap-block:   32px;    /* بين المجموعات */

  /* ---------- الزوايا ---------- */
  --r-xs: 8px;    /* الشارات المربعة، وأيقونة المنصة الصغيرة */
  --r-sm: 12px;   /* الحقول */
  --r-md: 16px;   /* البطاقات */
  --r-lg: 24px;   /* اللوحات الكبيرة والنماذج */
  --r-pill: 999px;/* الأزرار (حبة، مثل قوالب الهوية) */

  /* ---------- الظلال (على الداكن تكون خفيفة) ---------- */
  --shadow-1: inset 0 1px 0 rgba(255,255,255,.04), 0 8px 24px rgba(0,0,0,.32);
  --shadow-2: inset 0 1px 0 rgba(255,255,255,.05), 0 16px 40px rgba(0,0,0,.48);

  /* ---------- الأحجام الدنيا (WCAG) ---------- */
  --tap: 44px;        /* أقل حجم لأي شي ينضغط */
  --btn-h: 48px;
  --btn-h-lg: 56px;
  --field-h: 52px;
  --header-h: 64px;
  --focus-ring: 0 0 0 3px var(--c-bg), 0 0 0 6px var(--c-orange-glow);

  /* ---------- الحركة ---------- */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: 120ms;  /* hover والضغط */
  --dur-2: 200ms;  /* فتح القوائم والأسئلة */
}

@media (min-width: 1024px) {
  :root {
    --fs-display: 56px;  --lh-display: 1.55;
    --fs-h2:      40px;  --lh-h2:      1.6;
    --fs-h3:      24px;
    --fs-lead:    20px;
    --fs-body:    17px;
    --fs-small:   15px;
    --fs-btn:     17px;
    --fs-number:  128px;

    --gutter:     48px;
    --section-y:  120px;
    --gap-title:  32px;
    --gap-block:  48px;
    --header-h:   80px;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; }
}