/* Hallmark · macrostructure: Bento Grid · nav: N1b · footer: Ft1
 * theme: brand-locked (nexcode brand guide §3 الألوان · §4 الخطوط · §5 الأسطح)
 * genre: modern-minimal · tone: technical · audience: أصحاب مشاريع في الكويت والخليج
 * axes — paper-band: light · display-style: humanist-sans-arabic · accent-hue: cool
 * pre-emit critique: P5 H4 E5 S5 R4 V4
 *
 * نظام التصميم كاملاً. كل لون وخط ومسافة في الموقع يشير لتوكن من هنا.
 * ممنوع كتابة أي قيمة لونية أو خط مباشرة في styles.css أو index.html.
 * ════════════════════════════════════════════════════════════ */

:root {
  /* ── الألوان الأساسية — القسم ٣ من الدليل ──────────── */
  --ink: #0B1220;
  --navy: #16233F;
  --blue: #2F6BFF;
  --blue-on-dark: #5B8CFF;
  --teal: #17D1C6;
  --teal-on-dark: #2FE3D0;
  --surface: #F7F8FA;          /* خلفيات البطاقات الفاتحة */
  --bg: #EEF0F4;               /* خلفية الصفحة العامة */
  --text-secondary: #6B7280;
  --text-secondary-dark: #8B94A5;
  --white: #FFFFFF;            /* النصوص والعلامة على الداكن فقط — ليس سطحاً */

  /* ── محايدات مشتقة — كلها من عائلة الحبر، لا ألوان جديدة ─ */
  --line: #E1E5EC;             /* خط فاصل ظاهر */
  --line-soft: #E7EAF0;        /* هيرلاين خفيف بين الصفوف */
  --line-strong: #DDE2EA;      /* حدّ الرقائق */
  --text-faint: #C3C9D4;
  --text-placeholder: #6E7A8F;
  --danger: #E4606D;
  --danger-on-dark: #FF9AA2;

  /* ── أسطح ونصوص فوق الداكن ─────────────────────────── */
  --glass: rgba(255, 255, 255, .05);
  --glass-strong: rgba(255, 255, 255, .08);
  --glass-line: rgba(255, 255, 255, .12);
  --glass-line-strong: rgba(255, 255, 255, .22);
  --glass-line-hover: rgba(255, 255, 255, .50);
  --hairline-dark: rgba(255, 255, 255, .08);
  --ink-veil: rgba(11, 18, 32, .94);
  --field-bg: rgba(11, 18, 32, .45);
  --focus-ring-teal: rgba(47, 227, 208, .16);
  --on-dark: rgba(255, 255, 255, .78);
  --on-dark-soft: rgba(255, 255, 255, .70);

  /* ── التدرّجات — الوحيدة المسموحة في الدليل ────────── */
  --grad-dark: linear-gradient(150deg, #16233F 0%, #0B1220 100%);
  --grad-accent: linear-gradient(90deg, #2F6BFF, #17D1C6);

  /* ── الخطوط — القسم ٤ ─────────────────────────────── */
  --font-en: 'Space Grotesk', sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* ── المسافات — أساس 4pt، تسمية بالدور لا بالحجم ──── */
  --space-3xs: 0.125rem;   /*   2px */
  --space-2xs: 0.25rem;    /*   4px */
  --space-xs:  0.5rem;     /*   8px */
  --space-sm:  0.75rem;    /*  12px */
  --space-md:  1rem;       /*  16px */
  --space-lg:  1.5rem;     /*  24px */
  --space-xl:  2.5rem;     /*  40px */
  --space-2xl: 4rem;       /*  64px */
  --space-3xl: 6rem;       /*  96px */
  --space-4xl: 9rem;       /* 144px */

  /* ── الحركة — ثلاثة easings وثلاث مدد، لا غيرها ───── */
  --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: 120ms;   /* ضغطة زر، تبديل لون */
  --dur-short: 220ms;   /* هوفر، قائمة، تلميح */
  --dur-long:  420ms;   /* لوحة، أكورديون */

  /* ── الأسطح والزوايا — القسم ٥ ────────────────────── */
  --radius-card: 22px;
  --radius-btn: 10px;
  --radius-tile: 14px;
  --shadow-card: 0 1px 3px rgba(11, 18, 32, .06), 0 12px 40px rgba(11, 18, 32, .08);
  --shadow-code: 0 24px 70px rgba(0, 0, 0, .35);

  /* ── التخطيط ───────────────────────────────────────── */
  --wrap: 1200px;
  --gutter: var(--space-lg);
  --header-h: 72px;
  --header-h-scrolled: 64px;
}