/* Hallmark · tokens · نقلة — design-system: design.md · designed-as-app
 * genre: modern-minimal · theme: custom «الخانات» v2 · paper: light · display: IBM Plex Sans Arabic · accent: cool blue
 * قاعدة اللون: الرمادي = الخانة الحالية · الأزرق = الخانة التالية.
 * كل لون وخط ومسافة في الموقع يُستدعى من هنا بالاسم — لا قيم خام في الأنماط.
 */

:root{
  /* ── اللون ─────────────────────────────── */
  --color-paper:     #FFFFFF;
  --color-paper-2:   #EFF3F9;
  --color-paper-3:   #DDE5F0;

  --color-ink:       #0A1A33;   /* كحلي عميق لا أسود */
  --color-ink-soft:  #46607E;
  --color-ink-faint: #566D87;   /* 5.4:1 على الأبيض — أفتح منه يرسب */

  --color-blue:      #1B4DFF;   /* الخانة التالية */
  --color-blue-ink:  #123BCC;
  --color-blue-deep: #08206B;   /* لوح النقلة */
  --color-blue-tint: #E4EAFF;

  --color-alert:     #C4271B;   /* أخطاء النماذج فقط */

  --on-deep:         #FFFFFF;
  --on-deep-soft:    #B9C8F5;
  --on-deep-faint:   #8FA2DA;
  --on-deep-line:    rgba(255,255,255,.18);

  --color-line:      #E4EAF2;
  --color-line-2:    #C9D5E4;
  --color-focus:     #1B4DFF;

  --color-foot:      #0A1A33;
  --color-foot-soft: #8FA6BE;
  --color-foot-text: #C9D6E4;
  --color-foot-hl:   #8FB0FF;

  --shadow-card: 0 1px 2px rgba(10,26,51,.05), 0 8px 24px -12px rgba(10,26,51,.16);
  --shadow-lift: 0 2px 4px rgba(10,26,51,.06), 0 22px 44px -20px rgba(10,26,51,.28);
  --shadow-shot: 0 1px 2px rgba(10,26,51,.06), 0 30px 60px -28px rgba(10,26,51,.38);

  /* ── الخط ──────────────────────────────── */
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-body:    "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-2xs:  .75rem;
  --text-xs:   .8125rem;
  --text-sm:   .9375rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;
  --text-2xl:  2.25rem;
  --text-3xl:  2.8rem;
  --text-body:    clamp(1rem, .96rem + .22vw, 1.125rem);          /* 16 → 18 */
  --text-section: clamp(1.875rem, 1.2rem + 2.8vw, 3.375rem);      /* 30 → 54 */
  --text-display: clamp(2.5rem, 1.35rem + 4.9vw, 5.25rem);        /* 40 → 84 */
  /* أسماء قديمة تبقى للأجزاء التي تستعملها */
  --text-display-s: var(--text-section);

  --leading-display: 1.4;      /* العربية: الشدّة والنقاط تصطدم تحت ١٫٤ */
  --leading-tight:   1.45;
  --leading-body:    1.8;

  /* ── المسافات (4pt) ────────────────────── */
  --space-3xs: 2px;
  --space-2xs: 4px;
  --space-xs:  8px;
  --space-sm:  12px;
  --space-md:  20px;
  --space-lg:  32px;
  --space-xl:  48px;
  --space-2xl: 76px;
  --space-3xl: clamp(76px, 11vw, 136px);
  --space-4xl: clamp(96px, 13vw, 168px);

  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 100px;
  --rule: 1px;

  /* ── الحركة ────────────────────────────── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --dur-micro:  110ms;
  --dur-short:  200ms;
  --dur-long:   360ms;
  --dur-reveal: 720ms;
  --stagger:    70ms;

  /* ── التخطيط ───────────────────────────── */
  --maxw: 1240px;
  --gutter: clamp(20px, 4.6vw, 64px);
  --head-h: 76px;
}

/* الإنجليزية: الخط اللاتيني النظير، وسطور أضيق */
html[lang="en"]{
  --font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --font-body:    "IBM Plex Sans", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --leading-display: 1.06;
  --leading-tight:   1.18;
  --leading-body:    1.65;
}