/* ==========================================================================
   tokens.css — كل قرارات الهوية في مكان واحد.
   هذا هو الملف الوحيد اللي يتغيّر من عميل لعميل. لو احتجت تعدّل لون أو مسافة،
   عدّلها هنا — لا تعدّلها داخل sections.css.

   القيم هنا **افتراضية للبداية فقط**. تُستبدل لكل مشروع من مصدر العميل
   (لوغو، صور، مطبوعات) أو من مرجع نتفق عليه. ليست هوية SalimStudio.
   ========================================================================== */
:root{
  /* --- ألوان --- */
  --brand:        #1d4ed8;   /* اللون الرئيسي */
  --brand-dark:   #1739a6;   /* للـ hover */
  --brand-soft:   #eef3ff;   /* خلفية خفيفة بنفس العائلة */
  --brand-ink:    #ffffff;   /* النص فوق اللون الرئيسي */
  --accent:       #c2410c;   /* اختياري — لون ثانوي للتنبيه/التفاصيل */

  --ink:          #0e1b2c;   /* النص الأساسي */
  --ink-muted:    #586880;   /* نص ثانوي */
  --ink-subtle:   #8b97a8;   /* ⚠ لغير النص فقط (حدود/فواصل) — تباينه 2.96:1 على الأبيض، يفشل حد 4.5:1 */

  --surface:      #ffffff;
  --surface-2:    #f6f8fb;   /* خلفية قسم بديل */
  --surface-3:    #eef2f7;
  --line:         #e4e9f0;   /* فواصل وزخارف — معفاة من نسبة التباين */
  --line-strong:  #ccd5e1;   /* إبراز زخرفي (فواصل، حدود داخلية) */
  --line-control: #7b92b1;   /* حد العناصر التفاعلية: ≥ 3:1 (WCAG 1.4.11) — الأول كان 1.48:1 */

  --brand-light:  color-mix(in srgb, var(--brand) 45%, #ffffff); /* للاستخدام على خلفية غامقة */
  --action:       var(--brand);   /* لون الفعل الأساسي — المشروع يقدر يعطيه لونًا خاصًّا */
  --action-ink:   var(--brand-ink);
  --action-hover: var(--brand-dark);
  --success:      #0f7b52;
  --danger:       #c0392b;

  /* --- خطوط --- */
  --font-body:    'IBMPlexSansArabic', system-ui, 'Segoe UI', sans-serif;
  --font-display: 'IBMPlexSansArabic', system-ui, 'Segoe UI', sans-serif; /* بديل: 'Cairo' */
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700;

  /* --- مقاسات الخط (تتكيّف مع الشاشة) --- */
  --fz-display: clamp(2.5rem, 5vw, 4rem);
  --fz-h1:      clamp(2.125rem, 4vw, 3.25rem);
  --fz-h2:      clamp(1.75rem, 3vw, 2.5rem);
  --fz-h3:      clamp(1.25rem, 1.6vw, 1.5rem);
  --fz-h4:      1.125rem;
  --fz-body:    1.0625rem;   /* 17px */
  --fz-sm:      0.9375rem;   /* 15px */
  --fz-xs:      0.875rem;    /* 14px */
  --fz-eyebrow: 0.8125rem;   /* 13px */

  /* --- مسافات (سكيل 4px) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  /* --- استدارة وظلال --- */
  --radius-sm:8px; --radius:14px; --radius-lg:24px; --radius-pill:999px;
  --shadow-1:0 1px 2px rgba(14,27,44,.06), 0 1px 3px rgba(14,27,44,.04);
  --shadow-2:0 8px 24px rgba(14,27,44,.08), 0 2px 6px rgba(14,27,44,.04);

  /* --- التخطيط --- */
  --container:1200px;
  --container-narrow:760px;
  --gutter:clamp(16px, 4vw, 32px);
  --section-y:clamp(56px, 7vw, 112px);
  --measure:62ch;            /* طول سطر مريح للعربي */

  /* --- حركة --- */
  --dur:.2s; --ease:cubic-bezier(.2,.7,.3,1);
  --ring:0 0 0 3px color-mix(in srgb, var(--brand) 35%, transparent);
}

/* وضع ليلي — اختياري تمامًا. نستخدمه فقط لو العميل طلبه. */
:root[data-theme="dark"]{
  --ink:#f2f5f9; --ink-muted:#a8b4c6; --ink-subtle:#7d8a9d;
  --surface:#0e1420; --surface-2:#141c2a; --surface-3:#1b2534;
  --line:#25313f; --line-strong:#33414f;
  --brand-soft:#16233c;
}