/* ==========================================================================
   VERTEX — Design System Tokens
   كل الألوان والخطوط والمقاسات والحركة من هنا فقط.
   غيّر القيمة هنا تتغير في الموقع كله.
   ========================================================================== */

/* IBM Plex Mono للحروف اللاتينية والأرقام وبعض الرموز فقط.
   المسافة وعلامات الترقيم مستبعدة عمدًا: في الخط المونو عريضة وبتفرّق الكلام العربي،
   فبتيجي من Noto Kufi Arabic بدلها. */
@font-face {
  font-family: "VX Mono Latin";
  src: url("https://fonts.gstatic.com/s/ibmplexmono/v20/-F63fjptAgt5VM-kVkqdyU8n1i8q1w.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0030-0039, U+0041-005A, U+0061-007A, U+0023, U+0026, U+002B, U+0040, U+00A9;
}

:root {
  /* ------------------------------------------------------------------
     1. Brand palette — مأخوذة من اللوجو
     ------------------------------------------------------------------ */
  --brand-ink:          #1D2A3B;  /* الكحلي الأساسي (حرف V والكلمة) */
  --brand-ink-deep:     #111A26;  /* كحلي أعمق للأقسام الداكنة */
  --brand-slate:        #7B8793;  /* الرمادي الإردوازي (الأعمدة الفاتحة في اللوجو) */
  --brand-slate-deep:   #555F69;  /* ظل الإردوازي */
  --brand-slate-light:  #A9B3BE;  /* تدرج فاتح من الإردوازي (قسم التواصل) */
  --brand-signal:       #D9622B;  /* لون إشارة هندسي (تعارض / أقصى إجهاد / حد الإزاحة) — يُستخدم بندرة */

  /* ------------------------------------------------------------------
     2. Neutrals
     ------------------------------------------------------------------ */
  --white:       #FFFFFF;
  --paper:       #F3F4F6;  /* خلفية الصفحة الرمادية الفاتحة */
  --line:        #C3C9D0;  /* خطوط فاصلة */
  --line-soft:   #D9DDE2;

  /* ------------------------------------------------------------------
     3. Semantic roles — استخدمها في المكونات بدل الألوان المباشرة
     ------------------------------------------------------------------ */
  --color-text:        var(--brand-ink);
  --color-text-soft:   var(--brand-slate-deep);
  --color-bg:          var(--paper);
  --color-surface:     var(--white);
  --color-dark:        var(--brand-ink-deep);
  --color-on-dark:     var(--white);
  --color-accent:      var(--brand-slate-light);
  --color-on-accent:   var(--brand-ink);
  --color-border:      var(--line);
  --color-signal:      var(--brand-signal);
  --color-overlay:     rgba(17, 26, 38, 0.45);

  /* Logo mark colors (يتغيروا تلقائيًا على الخلفيات الداكنة) */
  --mark-ink:   var(--brand-ink);
  --mark-slate: var(--brand-slate);

  /* ------------------------------------------------------------------
     4. Typography
     العناوين: IBM Plex Sans Arabic (بديل Sequel Sans)
     النصوص التقنية والتسميات: IBM Plex Mono للاتيني والأرقام + Noto Kufi Arabic للعربي
     (بديل PP Fraktion Mono)
     ------------------------------------------------------------------ */
  --font-display: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-tech:    "VX Mono Latin", "Noto Kufi Arabic", ui-monospace, monospace;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    600;

  /* Type scale (fluid) */
  --fs-display: clamp(2.5rem, 1.6rem + 3.9vw, 5.25rem);  /* hero + section titles */
  --fs-h2:      clamp(2.25rem, 1.5rem + 3.4vw, 5rem);
  --fs-h3:      clamp(1.5rem, 1.15rem + 1.5vw, 2.75rem);
  --fs-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
  --fs-lead:    clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body:    1rem;
  --fs-tech:    0.875rem;
  --fs-label:   0.8125rem;
  --fs-small:   0.75rem;

  --lh-display: 1.15;
  --lh-heading: 1.3;
  --lh-lead:    1.6;
  --lh-body:    1.75;
  --lh-tech:    1.85;

  /* ------------------------------------------------------------------
     5. Spacing & layout
     ------------------------------------------------------------------ */
  --gutter:        1rem;      /* mobile */
  --gutter-md:     2.5rem;    /* ≥480px */
  --gutter-lg:     5.9rem;    /* ≥769px */
  --content-max:   116rem;
  --section-y:     3rem;
  --section-y-lg:  4rem;
  --nav-pad:       1.6rem;

  --radius-xs: 0.125rem;
  --radius-sm: 0.25rem;

  /* ------------------------------------------------------------------
     6. Motion
     ------------------------------------------------------------------ */
  --ease-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:    cubic-bezier(0.16, 1, 0.3, 1);    /* line masks / image reveals */
  --ease-inout:   cubic-bezier(0.76, 0, 0.24, 1);   /* preloader slides */
  --ease-draw:    cubic-bezier(0.66, 0, 0.34, 1);   /* split line / drawing */
  --dur-fast:     0.25s;
  --dur-base:     0.5s;
  --dur-slow:     1s;

  /* Preloader timeline (main.js يقرأ القيم دي) */
  --pl-step:      0.32s;   /* الفرق بين كل صورة والتانية */
  --pl-slide:     0.36s;   /* مدة نزول الصورة */
  --pl-expand:    0.9s;    /* تكبير الصورة الأخيرة لملء الشاشة */
  --pl-fade:      0.45s;   /* اختفاء طبقة التحميل */
  --pl-scale:     0.25;    /* حجم الصور جوه اللوجو */

  --hero-interval: 6s;     /* مدة كل صورة في الهيرو */
  --hero-fade:     1s;

  /* Lenis smooth scroll (main.js يقرأ القيم دي) */
  --scroll-duration: 1.15s;  /* نعومة سكرول الماوس */
  --scroll-to:       1.4s;   /* مدة الانتقال لقسم عند الضغط على رابط */
}