/* ==========================================================================
   FUTURE LINES — Design Tokens
   نظام التصميم | الطبقة الأساسية
   المفهوم: فوق المنسوب / تحت المنسوب  (Above grade / Below grade)
   ========================================================================== */

:root {
  /* ---------- 1. اللون | Color ---------------------------------------- */

  /* تحت المنسوب — الأسطح الداكنة (كحلي العلامة) */
  --fl-ink:        #0C1B2C;   /* أعمق سطح — التذييل والهيرو */
  --fl-steel:      #132B45;   /* سطح داكن أساسي */
  --fl-steel-2:    #1B3A5C;   /* سطح داكن مرتفع (بطاقات) */
  --fl-rule-dark:  #2C4C72;   /* خط شعري على الداكن */
  --fl-slate:      #8FA3BA;   /* نص ثانوي على الداكن — 6.75:1 على --fl-ink */
  --fl-slate-hi:   #BCCADA;   /* نص ثانوي عالي التباين — 10.4:1 */

  /* فوق المنسوب — الأسطح الفاتحة (أبيض العلامة) */
  --fl-paper:      #FFFFFF;   /* الخلفية الفاتحة الأساسية */
  --fl-bentonite:  #F2F4F7;   /* سطح فاتح مرتفع */
  --fl-sand:       #DDE3EA;   /* حد / فاصل على الفاتح */
  --fl-rule:       #CBD5E0;   /* خط شعري على الفاتح */
  --fl-graphite:   #3F5468;   /* نص ثانوي على الفاتح — 7.75:1 */

  /* اللون المميّز الوحيد — ذهب العلامة #D7AA29 */
  --fl-accent:     #8A6A12;   /* ذهب داكن للنص على الأبيض — 5.05:1 */
  --fl-accent-hi:  #D7AA29;   /* ذهب العلامة كما هو — 8.06:1 على --fl-ink */
  --fl-accent-dp:  #6B520C;   /* حالة الضغط / الحدود */
  --fl-accent-wash:#FBF3DE;   /* خلفية خفيفة */

  /* ألوان وظيفية — لا تعتمد على اللون وحده أبدًا */
  --fl-ok:         #8A6A12;
  --fl-warn:       #B4531C;
  --fl-warn-wash:  #FBE9DC;
  --fl-error:      #B3352A;
  --fl-error-wash: #F7E7E5;
  --fl-info:       #2A6395;
  --fl-info-wash:  #E5EDF5;

  /* ترميز المرافق تحت الأرض — معيار APWA
     يُستخدم كشارة تصنيف صغيرة فقط، ودائمًا مصحوبًا بنص */
  --util-water:    #1E74C4;   /* مياه صالحة للشرب */
  --util-sewer:    #2E7D3A;   /* صرف صحي وتصريف */
  --util-telecom:  #C46A16;   /* اتصالات وألياف */
  --util-power:    #B3352A;   /* كهرباء */
  --util-irrig:    #7B4EA8;   /* ري ومياه معالَجة */

  /* ---------- 2. الطباعة | Typography ---------------------------------- */
  --fl-font-ar: "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif;
  --fl-font-en: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --fl-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* المقياس — سائل، يبدأ من الجوال */
  --t-display: clamp(2.375rem, 1.4rem + 4.6vw, 4.75rem);
  --t-h1:      clamp(1.875rem, 1.25rem + 3vw, 3.25rem);
  --t-h2:      clamp(1.5rem, 1.15rem + 1.7vw, 2.25rem);
  --t-h3:      clamp(1.1875rem, 1.05rem + 0.7vw, 1.5rem);
  --t-h4:      clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --t-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --t-body:    1rem;
  --t-small:   0.875rem;
  --t-caption: 0.75rem;
  --t-kpi:     clamp(2.125rem, 1.4rem + 3.4vw, 3.5rem);
  --t-btn:     0.9375rem;
  --t-nav:     0.9375rem;

  /* الوزن */
  --w-light: 300;  --w-reg: 400;  --w-med: 500;
  --w-semi: 600;   --w-bold: 700;

  /* ارتفاع السطر — العربية تحتاج مساحة أكبر من اللاتينية */
  --lh-tight: 1.18;
  --lh-head:  1.32;
  --lh-body:  1.85;   /* فقرات عربية طويلة */
  --lh-ui:    1.5;

  /* تباعد الأحرف — لا يُطبَّق على العربية إطلاقًا */
  --ls-mono: 0.06em;
  --ls-eyebrow: 0.14em;

  /* ---------- 3. المسافات | Spacing (قاعدة 4px) ------------------------ */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.25rem;  --sp-6: 1.5rem;   --sp-8: 2rem;     --sp-10: 2.5rem;
  --sp-12: 3rem;    --sp-16: 4rem;    --sp-20: 5rem;    --sp-24: 6rem;
  --sp-32: 8rem;

  /* حشو الأقسام — سائل */
  --section-y: clamp(3.5rem, 2rem + 7vw, 7.5rem);
  --section-y-sm: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);

  /* ---------- 4. الشبكة | Grid ---------------------------------------- */
  --container: 1280px;
  --container-narrow: 760px;
  --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  --grid-cols: 12;
  --grid-gap: clamp(1rem, 0.5rem + 1.6vw, 2rem);

  /* ---------- 5. الحدود والزوايا | Borders & Radii --------------------- */
  /* زوايا حادة تقريبًا — لغة هندسية لا تجارية */
  --r-sm: 2px;   --r-md: 3px;   --r-lg: 4px;   --r-pill: 999px;
  --bw: 1px;
  --border-light: var(--bw) solid var(--fl-rule);
  --border-dark:  var(--bw) solid var(--fl-rule-dark);

  /* ---------- 6. الظل | Elevation -------------------------------------- */
  /* الظل مستخدم بأقل قدر — نعتمد على الخط الشعري */
  --sh-1: 0 1px 2px rgba(12,27,44,.06);
  --sh-2: 0 2px 8px rgba(12,27,44,.08);
  --sh-3: 0 12px 32px rgba(12,27,44,.14);

  /* ---------- 7. الحركة | Motion --------------------------------------- */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-1: 140ms;  --dur-2: 260ms;  --dur-3: 520ms;  --dur-4: 900ms;

  /* ---------- 8. الطبقات | Z-index ------------------------------------- */
  --z-base: 1; --z-sticky: 100; --z-header: 200; --z-drawer: 300;
  --z-modal: 400; --z-toast: 500;

  /* ---------- 9. أحجام ثابتة ------------------------------------------- */
  --header-h: 72px;
  --header-h-sm: 60px;
  --mobile-bar-h: 60px;
  --focus-ring: 2px solid var(--fl-accent-hi);
  --focus-offset: 3px;
}

/* ==========================================================================
   بديل لوني للاعتماد — «نحاس المسّاح»
   يُفعَّل بإضافة data-accent="copper" على <html>. تبديل متغيّر واحد لا أكثر.
   ========================================================================== */
[data-accent="copper"] {
  --fl-accent:      #A85C2B;
  --fl-accent-hi:   #D98B4F;
  --fl-accent-dp:   #7E4420;
  --fl-accent-wash: #F5EAE0;
  --fl-ok:          #2E7D3A;
}

/* تقليل الحركة — التزام إلزامي */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}