/* ==========================================================================
   DLC — Design Tokens
   يُحمّل قبل جميع ملفات الستايل الأخرى.
   كل قيمة لون أو مسافة أو حجم خط في الموقع يجب أن تشير لمتغير من هنا.
   ========================================================================== */

:root{
  color-scheme: light only;

  /* ---------- الهوية: أبيض + كحلي ---------- */
  --navy:#0B2340;          /* اللون الأساسي */
  --navy-deep:#071829;     /* أغمق — الهيدر والفوتر والأقسام الداكنة */
  --navy-mid:#14385E;      /* وسيط — hover والتدرجات */
  --steel:#3E6FA5;         /* لون مساعد — الأيقونات والروابط */
  --ice:#C8DAEE;           /* فاتح — نص على خلفية داكنة */
  --cool:#F4F7FB;          /* خلفية أقسام فاتحة */
  --white:#FFFFFF;

  --text:#1F2A36;          /* نص أساسي */
  --text-soft:#5C6B7C;     /* نص ثانوي */
  --line:#DFE6EF;          /* حدود على خلفية فاتحة */
  --line-dark:rgba(255,255,255,.16); /* حدود على خلفية داكنة */

  --whatsapp:#1FAF5E;
  --shadow-sm:0 2px 8px rgba(11,35,64,.06);
  --shadow-md:0 12px 34px rgba(11,35,64,.10);
  --shadow-lg:0 30px 70px rgba(7,24,41,.40);

  /* ---------- التوافق مع المتغيرات القديمة ----------
     ملفات CSS الحالية تستخدم هذه الأسماء. نبقيها مربوطة
     بالنظام الجديد حتى لا ينكسر شيء أثناء الانتقال. */
  --primary-blue:var(--navy);
  --dark-blue:var(--navy-deep);
  --light-blue:var(--navy-mid);
  --accent-color:var(--steel);
  --light-accent:#6BA3E8;
  --light-gray:var(--cool);
  --gray:var(--line);
  --dark-gray:var(--text-soft);
  --text-dark:var(--text);
  --shadow:rgba(0,0,0,.1);
  --shadow-lg-legacy:rgba(0,0,0,.2);

  /* ---------- الخطوط ---------- */
  --font-head:'Almarai','Cairo',sans-serif;   /* العناوين */
  --font-body:'Tajawal','Cairo',sans-serif;   /* النصوص */

  /* سلّم أحجام الخط — متجاوب تلقائياً */
  --fs-h1:clamp(30px,4.6vw,54px);
  --fs-h2:clamp(28px,3.6vw,44px);
  --fs-h3:clamp(19px,2vw,24px);
  --fs-h4:19px;
  --fs-lead:clamp(20px,2.1vw,27px);
  --fs-body:16.5px;
  --fs-sm:15px;
  --fs-xs:13.5px;

  --lh-head:1.45;
  --lh-body:1.85;

  --fw-light:300;
  --fw-normal:400;
  --fw-medium:500;
  --fw-bold:700;
  --fw-black:800;

  /* ---------- المسافات ---------- */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:24px;
  --sp-6:32px;
  --sp-7:48px;
  --sp-8:64px;
  --sp-9:104px;   /* المسافة الرأسية بين الأقسام */

  --container:1220px;
  --gutter:28px;
  --radius:3px;
  --radius-lg:4px;

  --t-fast:.15s;
  --t-base:.25s;
  --t-slow:.5s;
}

/* ==========================================================================
   الخطوط — محمّلة محلياً (لا Google Fonts): أسرع، وبلا طلبات خارجية
   ========================================================================== */

/* --- Almarai: العناوين --- */
@font-face{
  font-family:'Almarai';
  src:url('webfonts/Almarai/Almarai-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai';
  src:url('webfonts/Almarai/Almarai-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai';
  src:url('webfonts/Almarai/Almarai-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Almarai';
  src:url('webfonts/Almarai/Almarai-ExtraBold.woff2') format('woff2');
  font-weight:800; font-style:normal; font-display:swap;
}

/* --- Tajawal: النصوص --- */
@font-face{
  font-family:'Tajawal';
  src:url('webfonts/Tajawal/Tajawal-Light.woff2') format('woff2');
  font-weight:300; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Tajawal';
  src:url('webfonts/Tajawal/Tajawal-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Tajawal';
  src:url('webfonts/Tajawal/Tajawal-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Tajawal';
  src:url('webfonts/Tajawal/Tajawal-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}

/* ==========================================================================
   الأساسيات
   ========================================================================== */

html{scroll-behavior:smooth}

body{
  font-family:var(--font-body);
  font-style:normal;
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  color:var(--text);
  background:var(--white);
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  font-style:normal;      /* يمنع أي ميل موروث */
  line-height:var(--lh-head);
  font-weight:var(--fw-black);
}

h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:var(--fs-h4)}

/* ==========================================================================
   إصلاح الخط المائل
   خط Cairo/Almarai/Tajawal لا يملك نسخة italic حقيقية، فيولّد المتصفح
   ميلاً صناعياً (faux italic) يشوّه الحروف العربية. نمنعه عالمياً.
   ========================================================================== */
body,h1,h2,h3,h4,h5,h6,p,span,a,li,label,input,select,textarea,button,
.section-title,.section-subtitle,blockquote,em,i:not([class*="fa-"]){
  font-style:normal !important;
}

/* الأيقونات مستثناة — Font Awesome يعتمد على font-style */
[class*="fa-"],.fa,.fas,.far,.fab{font-style:normal !important}

/* ==========================================================================
   إمكانية الوصول
   ========================================================================== */
:focus-visible{outline:3px solid var(--steel);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}