/* =========================================================
   BARCODE — هوية بصرية v4 ("إيقاع ب" + تخطيط هادئ واسع)
   ---------------------------------------------------------
   الفكرة الواحدة التي تُبنى عليها كل العناصر:
   الشعار حرف "ب" مكوّن من 9 خطوط باركود + نقطة معيّنة.
   - الخطوط  = البيانات والتقنية   → نقش "إيقاع الخطوط" + تدرّج البيانات
   - النقطة  = الإجراء والانطلاق  → المعيّن + تدرّج الإجراء (للأزرار فقط)
   لا نستخدم أي نقش خارجي؛ كل زخرفة مشتقة من الشعار.
   ========================================================= */

:root {
  /* ---- Color (قاعدة 60 / 30 / 10) ----
     60% رمل (خلفية)  ·  30% ليل نيلي (أقسام مميزة)  ·  10% تدرّجات */
  --sand: #FDFCF9;          /* أبيض دافئ نظيف */
  --tint: #EEF5F5;          /* أقسام بديلة بلمسة بحرية */
  --night-0: #0E2A33;       /* أعمق درجة للواجهة */
  --sand-2: #F3ECDF;
  --sand-3: #E6DCCB;

  --night: #12363F;
  --night-2: #17434E;
  --night-3: #1D5664;

  --text: #12262B;
  --text-dim: #55666A;
  --on-night: #FFF9EF;
  --on-night-dim: #A8C3C6;

  --turquoise: #10B6A8;   /* بيانات */
  --sea: #1C7DA8;      /* بيانات */
  --saffron: #FFB21E;     /* إجراء */
  --coral: #FF5D5D;       /* إجراء */
  --success: #2BC48A;
  --saffron-dark: #F2A100;  /* حالة hover لزر الإجراء */
  --accent-ink: #0B6E66;    /* الكلمة المميزة والروابط على الخلفية الفاتحة */

  /* التدرّجات داخل الشعار فقط؛ الموقع يستخدم ألواناً صريحة */
  --grad-data: linear-gradient(135deg, var(--turquoise), var(--sea));
  --grad-action: linear-gradient(120deg, var(--saffron), var(--coral));

  /* ---- Typography ----
     Readex Pro: عربي هندسي حديث بفتحات واسعة — يناسب شركة تقنية ويُقرأ بوضوح.
     IBM Plex Sans Arabic: للنصوص الطويلة. */
  --font-display: "Readex Pro", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Readex Pro", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* سلّم الأحجام — نسبة 1.25 على أساس 17px */
  --fs-sm: .875rem;                              /* 14 */
  --fs-base: 1.0625rem;                          /* 17 */
  --fs-lead: clamp(1.0625rem, 1.2vw, 1.2rem);    /* 17 → 19 */
  --fs-h4: 1.2rem;                               /* 19 */
  --fs-h3: clamp(1.2rem, 1.5vw, 1.4rem);         /* 19 → 22 */
  --fs-h2: clamp(1.9rem, 3.4vw, 3.1rem);         /* 30 → 50 */
  --fs-h1: clamp(2.4rem, 5vw, 4.4rem);           /* 38 → 70 — وزن خفيف 500 */
  --fs-num: clamp(2.2rem, 3.4vw, 3rem);          /* أرقام الإحصائيات */

  --lh-head: 1.3;         /* العربية تحتاج مساحة للحركات والنقاط */
  --fw-head: 500;         /* عناوين كبيرة بوزن خفيف = أناقة */
  --lh-body: 1.85;
  --w-head: 26ch;         /* أقصى عرض للعنوان — والسطر الثاني يُكسر يدوياً قبل الكلمة المميزة */
  --w-text: 36em;

  /* ---- Space (أساس 8) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 128px;
  --gutter: clamp(16px, 4vw, 56px);
  --max: 1240px;

  /* ---- Shape: زوايا ناعمة + المعيّن كعلامة ---- */
  --r-1: 12px;
  --r-2: 20px;
  --r-3: 28px;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 200ms;
  --t-med: 450ms;
  --t-slow: 900ms;

  /* ---- v5: التدرّجات الضوئية (من ألوان الهوية فقط، بدون بنفسجي) ----
     aurora: خلفية الواجهات الداكنة — بترولي عميق ينفتح على أزرق المحيط مع وهج فيروزي
     ocean:  شريط الدعوة قبل الفوتر — حركة من الأزرق العميق إلى الفيروزي
     dawn:   لمسة ضوء خفيفة على الأقسام الفاتحة */
  --grad-aurora:
    radial-gradient(70% 60% at 85% -5%, rgba(16,182,168,.42), transparent 60%),
    radial-gradient(60% 75% at -5% 105%, rgba(28,125,168,.60), transparent 65%),
    radial-gradient(35% 40% at 55% 75%, rgba(255,178,30,.10), transparent 70%),
    linear-gradient(165deg, #0A2027 0%, #12363F 45%, #0F4256 100%);
  --grad-ocean:
    radial-gradient(55% 90% at 100% 0%, rgba(255,178,30,.28), transparent 60%),
    radial-gradient(60% 90% at 0% 100%, rgba(16,182,168,.55), transparent 65%),
    linear-gradient(120deg, #0E3A4A 0%, #155F82 50%, #1C7DA8 100%);
  --grad-dawn:
    radial-gradient(55% 70% at 100% 0%, rgba(16,182,168,.10), transparent 65%),
    radial-gradient(45% 65% at 0% 100%, rgba(28,125,168,.08), transparent 65%);
  --grad-tile-sea: linear-gradient(155deg, #E4F3F3 0%, #F6FAF9 60%, #FFFFFF 100%);
  --grad-tile-sun: linear-gradient(155deg, #FFF3DA 0%, #FFF9EE 55%, #FFFFFF 100%);
  --grad-tile-coral: linear-gradient(155deg, #FFE6E3 0%, #FFF6F4 55%, #FFFFFF 100%);

  /* ---- v5: الإيقاع العمودي والحاويات ---- */
  --sec-y: clamp(72px, 9vw, 128px);     /* مسافة القسم العادي أعلى وأسفل */
  --sec-y-sm: clamp(48px, 6vw, 80px);   /* قسم مضغوط (شرائط، عروض) */
  --head-gap: clamp(32px, 4vw, 56px);   /* بين عنوان القسم ومحتواه */
  --gap: clamp(16px, 2vw, 28px);        /* بين البطاقات */
  --narrow: 880px;

  /* ---- v5: الظلال (ثلاث درجات فقط) ---- */
  --shadow-1: 0 1px 2px rgba(10,32,39,.06), 0 8px 24px -14px rgba(10,32,39,.18);
  --shadow-2: 0 2px 4px rgba(10,32,39,.06), 0 24px 48px -24px rgba(10,32,39,.30);
  --shadow-3: 0 40px 80px -30px rgba(4,20,26,.55);

  /* ---- Motif: "إيقاع الخطوط" — خطوط حرف ب نفسها مكررة ---- */
  --motif-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72' viewBox='0 0 66 36'%3E%3Cg fill='%23FFFFFF' fill-opacity='.055'%3E%3Crect x='3' y='4' width='3' height='26' rx='1'/%3E%3Crect x='9' y='16' width='3' height='14' rx='1'/%3E%3Crect x='15' y='21' width='3' height='9' rx='1'/%3E%3Crect x='21' y='23' width='3' height='7' rx='1'/%3E%3Crect x='27' y='23' width='3' height='7' rx='1'/%3E%3Crect x='33' y='23' width='3' height='7' rx='1'/%3E%3Crect x='39' y='21' width='3' height='9' rx='1'/%3E%3Crect x='45' y='17' width='3' height='13' rx='1'/%3E%3Crect x='51' y='10' width='3' height='20' rx='1'/%3E%3C/g%3E%3C/svg%3E");
  --motif-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='72' viewBox='0 0 66 36'%3E%3Cg fill='%230B2830' fill-opacity='.045'%3E%3Crect x='3' y='4' width='3' height='26' rx='1'/%3E%3Crect x='9' y='16' width='3' height='14' rx='1'/%3E%3Crect x='15' y='21' width='3' height='9' rx='1'/%3E%3Crect x='21' y='23' width='3' height='7' rx='1'/%3E%3Crect x='27' y='23' width='3' height='7' rx='1'/%3E%3Crect x='33' y='23' width='3' height='7' rx='1'/%3E%3Crect x='39' y='21' width='3' height='9' rx='1'/%3E%3Crect x='45' y='17' width='3' height='13' rx='1'/%3E%3Crect x='51' y='10' width='3' height='20' rx='1'/%3E%3C/g%3E%3C/svg%3E");
}