/* =====================================================================
   ZOVAQ Technologies — Design Tokens (Redesign v2)
   ---------------------------------------------------------------------
   يُحمَّل من includes/header.php فقط (الصفحات العامة + /account/).
   لوحة الأدمن ومعالج التنصيب ما بيحمّلوه — بيضلوا على variables.css.

   قيم الألوان من ZOVAQ Master Prompt v2 (القسم 6)، مع تعديل واحد بعد
   فحص التباين الفعلي (WCAG 2.x relative luminance):
     - --error بالوضع الفاتح: #D8334A (4.32:1 على --bg — يفشل للنص
       العادي) → #C42B40 (5.15:1 على --bg، 5.58:1 على --surface).
   قيود استخدام (بدون تغيير القيم):
     - --brand بالوضع الفاتح على --surface-2 = 4.44:1 → للنص الكبير
       (≥24px أو ≥18.66px bold) والأيقونات فقط، مو للنص الصغير.
     - --accent زخرفي فقط (حدود، إضاءات خلفية ≤ ~10% من الشاشة).
     - #4687FF ما بينحط أبدًا كخلفية زر بنص أبيض (3.40:1) —
       الأزرار تستخدم --primary-solid (5.17:1).
   ===================================================================== */

/* ---------------------------------------------------------------------
   الخطوط — مستضافة ذاتيًا، subset، font-display: swap
   Inter (لاتيني): 400/500/600 · IBM Plex Sans Arabic (عربي): 400–700
   Montserrat (عناوين إنجليزية): 700/800 — نفس ملفات المشروع الحالية
   --------------------------------------------------------------------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/inter-latin-400.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/inter-latin-500.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/inter-latin-600.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-400.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-500.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-600.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: 'IBM Plex Sans Arabic';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-arabic-700.woff2') format('woff2');
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/montserrat-latin-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../fonts/montserrat-latin-800.woff2') format('woff2');
}

/* ---------------------------------------------------------------------
   Tokens ثابتة بكل الأوضاع: Layout · Radius · Spacing · Motion · Type
   --------------------------------------------------------------------- */
:root {
    /* Layout */
    --container-max: 1200px;
    --page-padding-mobile: 20px;
    --page-padding-tablet: 32px;
    --page-padding-desktop: 48px;
    --page-padding: var(--page-padding-mobile);
    --grid-columns: 12;
    --grid-gap: 24px;
    --header-height: 72px;
    --header-height-compact: 60px;
    --measure: 68ch;                 /* طول السطر الأقصى (65–72 حرف) */

    /* Z motif — هندسة حرف Z من الشعار (assets/images/logo-*.svg):
       القطر ينزل 24 ويرجع 28 أفقيًا → زاوية 40.6° من الأفقي، اتجاهه من
       أعلى-يمين لأسفل-يسار. كل استخدامات الـ motif مبنية على هالنسبة 28:24. */
    --z-run: 28px;
    --z-rise: 24px;
    --z-cut-lg: 28px 24px;
    --z-cut-md: 21px 18px;
    --z-cut-sm: 14px 12px;
    --z-cut-xs: 7px 6px;
    --z-diagonal: 139.4deg;          /* زاوية تدرّج حافته موازية لقطر الـ Z */

    /* Radius */
    --radius-card: 12px;
    --radius-button: 10px;
    --radius-input: 10px;
    --radius-modal: 16px;
    --radius-pill: 999px;

    /* Spacing (مضاعفات 8) */
    --space-1: 8px;
    --space-2: 16px;
    --space-3: 24px;
    --space-4: 32px;
    --space-5: 40px;
    --space-6: 48px;
    --space-8: 64px;
    --space-10: 80px;
    --space-12: 96px;
    --space-16: 128px;
    --section-space: var(--space-10);

    /* Touch targets */
    --target-min: 44px;
    --target-comfort: 48px;
    --icon-box: 48px;
    --icon-size: 24px;
    --icon-stroke: 1.5;

    /* Motion — transform/opacity فقط */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 150ms;               /* hover, focus */
    --dur-base: 250ms;               /* menus, accordions, tabs */
    --dur-slow: 600ms;               /* scroll reveals */

    /* Font stacks */
    --font-body-en: 'Inter', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --font-heading-en: 'Montserrat', 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
    --font-body-ar: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-heading-ar: 'IBM Plex Sans Arabic', 'Montserrat', 'Segoe UI', Tahoma, Arial, sans-serif;
    --font-body: var(--font-body-en);
    --font-heading: var(--font-heading-en);

    /* Type scale — fluid (clamp)، الحد الأدنى بـ rem ليكبر مع تكبير النص */
    --fs-display: clamp(3rem, 2.1rem + 3.75vw, 4.5rem);      /* 48–72px */
    --fs-h1: clamp(2.5rem, 1.9rem + 2.5vw, 3.5rem);          /* 40–56px */
    --fs-h2: clamp(1.875rem, 1.5rem + 1.5vw, 2.5rem);        /* 30–40px */
    --fs-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.625rem);      /* 22–26px */
    --fs-body: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);      /* 16–18px */
    --fs-body-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);  /* 17–20px */
    --fs-small: 0.875rem;                                    /* 14px — الحد الأدنى */

    --fw-body: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-heading: 700;
    --fw-display: 800;

    --lh-body: 1.6;
    --lh-heading: 1.15;
    --tracking-heading: -0.02em;     /* إنجليزي فقط */
    --tracking-body: -0.01em;

    /* Layers */
    --z-base: 1;
    --z-sticky-cta: 80;
    --z-header: 100;
    --z-menu: 200;
    --z-overlay: 300;
    --z-toast: 400;
}

@media (min-width: 48em) {
    :root { --page-padding: var(--page-padding-tablet); --section-space: var(--space-12); }
}
@media (min-width: 64em) {
    :root { --page-padding: var(--page-padding-desktop); }
}
@media (min-width: 80em) {
    :root { --section-space: var(--space-16); }
}

/* العربية: خط Plex، بدون letter-spacing، line-height أعلى لتجنب قص التشكيل */
:root[lang="ar"] {
    --font-body: var(--font-body-ar);
    --font-heading: var(--font-heading-ar);
    --lh-body: 1.8;
    --lh-heading: 1.3;
    --tracking-heading: 0;
    --tracking-body: 0;
    --fw-display: 700;               /* Plex Arabic: أثقل وزن محمّل 700 */
}

/* ---------------------------------------------------------------------
   Dark Theme (الافتراضي — هوية ZOVAQ)
   --------------------------------------------------------------------- */
:root,
:root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #140526;
    --surface: #1F0833;
    --surface-2: #2A1045;

    --brand: #4687FF;                /* نصوص مميزة، روابط، أيقونات — 5.72:1 على --bg */
    --primary-solid: #2563EB;        /* خلفية الأزرار الأساسية — أبيض عليها 5.17:1 */
    --primary-solid-hover: #1D4ED8;
    --accent: #8B5CF6;               /* زخرفي فقط */

    --text: #F4F1FA;                 /* 17.42:1 على --bg */
    --text-muted: #B9B0CC;           /* 9.40:1 على --bg، 8.06:1 على --surface-2 */
    --on-primary: #FFFFFF;

    --border: rgba(255, 255, 255, 0.08);
    --border-strong: rgba(255, 255, 255, 0.16);

    --success: #2DD4A8;              /* 10.28:1 */
    --warning: #F6C45C;
    --error: #FF6B7A;                /* 7.07:1 */

    --focus-ring: #4687FF;

    /* مشتقات (Surfaces شفافة، ظلال، إضاءات) */
    --header-bg: rgba(20, 5, 38, 0.72);
    --overlay-bg: rgba(10, 2, 20, 0.72);
    --brand-soft: rgba(70, 135, 255, 0.12);    /* خلفية مربعات الأيقونات */
    --accent-soft: rgba(139, 92, 246, 0.14);
    --grid-line: rgba(255, 255, 255, 0.04);    /* technical grid */
    --glow-brand: radial-gradient(closest-side, rgba(70, 135, 255, 0.18), transparent);
    --glow-accent: radial-gradient(closest-side, rgba(139, 92, 246, 0.12), transparent);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.45);
    --logo-filter: none;

    /* ألوان الشرائح (Mega menu، بطاقات الخدمات). --seg-*: أيقونات ونص،
       --seg-*-soft: خلفيات مائلة خفيفة، --seg-on: لون الأيقونة فوق مربع ملوّن */
    --seg-business: #4687FF;
    --seg-startup: #A78BFA;
    --seg-gov: #F6C45C;
    --seg-business-soft: rgba(70, 135, 255, 0.10);
    --seg-startup-soft: rgba(167, 139, 250, 0.10);
    --seg-gov-soft: rgba(246, 196, 92, 0.09);
    --seg-on: #140526;
    --z-line: rgba(70, 135, 255, 0.9);
    --z-field-color: #4687FF;
    --z-field-opacity: 0.18;
    --z-cut-color: #4687FF;
    --brand-text: #4687FF;           /* نص أزرق فوق لوحات ملوّنة/متوهجة */
    /* بطاقات: زجاج بالوضع الغامق (خلفية شبه شفافة + backdrop blur) وظلال بطبقتين */
    --card-fill: rgba(42, 16, 69, 0.55);
    --card-highlight: rgba(255, 255, 255, 0.10);
    --card-border: rgba(255, 255, 255, 0.09);
    --shadow-plate: rgba(4, 0, 12, 0.85);
    --panel-fill: radial-gradient(70% 90% at var(--glow-x, 85%) 0%, rgba(70, 135, 255, 0.22), transparent 60%),
                  radial-gradient(50% 70% at var(--glow-x2, 0%) 100%, rgba(139, 92, 246, 0.14), transparent 70%),
                  #1A0730;
}

/* ---------------------------------------------------------------------
   Light Theme
   --------------------------------------------------------------------- */
:root[data-theme="light"] {
    color-scheme: light;

    --bg: #F7F5FB;
    --surface: #FFFFFF;
    --surface-2: #F0ECF7;

    --brand: #2563EB;                /* 4.78:1 على --bg — نص كبير/أيقونات على --surface-2 فقط */
    --primary-solid: #2563EB;
    --primary-solid-hover: #1D4ED8;
    --accent: #7C3AED;

    --text: #1A0B2E;                 /* 17.16:1 */
    --text-muted: #5B5270;           /* 6.73:1 على --bg، 6.25:1 على --surface-2 */
    --on-primary: #FFFFFF;

    --border: rgba(26, 11, 46, 0.10);
    --border-strong: rgba(26, 11, 46, 0.18);

    --success: #0B7A56;              /* 4.94:1 */
    --warning: #8A5D00;              /* 5.32:1 */
    --error: #C42B40;                /* 5.15:1 (مُعدّل من #D8334A = 4.32:1) */

    --focus-ring: #2563EB;

    --header-bg: rgba(247, 245, 251, 0.8);
    --overlay-bg: rgba(26, 11, 46, 0.45);
    --brand-soft: rgba(37, 99, 235, 0.08);
    --accent-soft: rgba(124, 58, 237, 0.08);
    --grid-line: rgba(26, 11, 46, 0.05);
    --glow-brand: radial-gradient(closest-side, rgba(37, 99, 235, 0.10), transparent);
    --glow-accent: radial-gradient(closest-side, rgba(124, 58, 237, 0.07), transparent);
    --shadow-sm: 0 1px 2px rgba(26, 11, 46, 0.06);
    --shadow-md: 0 8px 24px rgba(26, 11, 46, 0.08);
    --shadow-lg: 0 24px 64px rgba(26, 11, 46, 0.12);
    --logo-filter: none;

    --seg-business: #2563EB;
    --seg-startup: #7C3AED;
    --seg-gov: #8A5D00;
    --seg-business-soft: rgba(37, 99, 235, 0.07);
    --seg-startup-soft: rgba(124, 58, 237, 0.06);
    --seg-gov-soft: rgba(138, 93, 0, 0.07);
    --seg-on: #FFFFFF;
    --z-line: rgba(37, 99, 235, 0.75);
    --z-field-color: #2563EB;
    --z-field-opacity: 0.15;
    --z-cut-color: #2563EB;
    --brand-text: #1D4ED8;           /* #2563EB نزل لـ 3.9:1 فوق اللوحة المتوهجة — مقاس فعليًا */
    --card-fill: rgba(255, 255, 255, 0.78);
    --card-highlight: rgba(255, 255, 255, 0.95);
    --card-border: rgba(26, 11, 46, 0.08);
    --shadow-plate: rgba(40, 20, 90, 0.28);
    --panel-fill: radial-gradient(70% 90% at var(--glow-x, 85%) 0%, rgba(37, 99, 235, 0.14), transparent 60%),
                  radial-gradient(50% 70% at var(--glow-x2, 0%) 100%, rgba(124, 58, 237, 0.08), transparent 70%),
                  #EDE8F6;
}

/* System fallback: لو ما في data-theme إطلاقًا (مثلًا JS معطّل) نحترم
   إعداد الجهاز. بالحالة العادية سكربت <head> بيضبط data-theme قبل الرسم. */
@media (prefers-color-scheme: light) {
    :root:not([data-theme]) {
        color-scheme: light;
        --bg: #F7F5FB;
        --surface: #FFFFFF;
        --surface-2: #F0ECF7;
        --brand: #2563EB;
        --primary-solid: #2563EB;
        --primary-solid-hover: #1D4ED8;
        --accent: #7C3AED;
        --text: #1A0B2E;
        --text-muted: #5B5270;
        --on-primary: #FFFFFF;
        --border: rgba(26, 11, 46, 0.10);
        --border-strong: rgba(26, 11, 46, 0.18);
        --success: #0B7A56;
        --warning: #8A5D00;
        --error: #C42B40;
        --focus-ring: #2563EB;
        --header-bg: rgba(247, 245, 251, 0.8);
        --overlay-bg: rgba(26, 11, 46, 0.45);
        --brand-soft: rgba(37, 99, 235, 0.08);
        --accent-soft: rgba(124, 58, 237, 0.08);
        --grid-line: rgba(26, 11, 46, 0.05);
        --glow-brand: radial-gradient(closest-side, rgba(37, 99, 235, 0.10), transparent);
        --glow-accent: radial-gradient(closest-side, rgba(124, 58, 237, 0.07), transparent);
        --shadow-sm: 0 1px 2px rgba(26, 11, 46, 0.06);
        --shadow-md: 0 8px 24px rgba(26, 11, 46, 0.08);
        --shadow-lg: 0 24px 64px rgba(26, 11, 46, 0.12);
        --seg-business: #2563EB;
        --seg-startup: #7C3AED;
        --seg-gov: #8A5D00;
        --seg-business-soft: rgba(37, 99, 235, 0.07);
        --seg-startup-soft: rgba(124, 58, 237, 0.06);
        --seg-gov-soft: rgba(138, 93, 0, 0.07);
        --seg-on: #FFFFFF;
        --z-line: rgba(37, 99, 235, 0.75);
        --z-field-color: #2563EB;
        --z-field-opacity: 0.15;
    --z-cut-color: #2563EB;
    --brand-text: #1D4ED8;           /* #2563EB نزل لـ 3.9:1 فوق اللوحة المتوهجة — مقاس فعليًا */
    --card-fill: rgba(255, 255, 255, 0.78);
    --card-highlight: rgba(255, 255, 255, 0.95);
    --card-border: rgba(26, 11, 46, 0.08);
    --shadow-plate: rgba(40, 20, 90, 0.28);
    --panel-fill: radial-gradient(70% 90% at var(--glow-x, 85%) 0%, rgba(37, 99, 235, 0.14), transparent 60%),
                  radial-gradient(50% 70% at var(--glow-x2, 0%) 100%, rgba(124, 58, 237, 0.08), transparent 70%),
                  #EDE8F6;
    }
}

/* RTL: التوهج الرئيسي بلوحات الأقسام بينتقل لجهة البداية المعاكسة */
:root { --glow-x: 85%; --glow-x2: 0%; }
:root[dir="rtl"] { --glow-x: 15%; --glow-x2: 100%; }

/* Reduced motion: كل المدد شبه صفرية (الحالة النهائية تظهر فورًا) */
@media (prefers-reduced-motion: reduce) {
    :root {
        --dur-fast: 0.01ms;
        --dur-base: 0.01ms;
        --dur-slow: 0.01ms;
    }
}

/* ---------------------------------------------------------------------
   Legacy aliases — صفحات /account/ بتستخدم أسماء variables.css القديمة
   (--color-*). بما إنها بتحمّل header.php (وبالتالي هذا الملف بعد
   style.css)، نربط الأسماء القديمة بالـ tokens الجديدة عشان يضل شكلها
   متسق مع الـ header/footer الجداد بدون أي تعديل على ملفات /account/.
   الأدمن ومعالج التنصيب ما بيحمّلوا هذا الملف، فما بيتأثروا.
   --------------------------------------------------------------------- */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
    --color-bg: var(--bg);
    --color-bg-elevated: var(--surface-2);
    --color-bg-surface: var(--surface);
    --color-border: var(--border-strong);
    --color-text-primary: var(--text);
    --color-text-secondary: var(--text-muted);
    --color-text-muted: var(--text-muted);
    --color-primary: var(--brand);
    --color-primary-hover: var(--primary-solid-hover);
    --color-accent: var(--accent);
    --color-success: var(--success);
    --color-warning: var(--warning);
    --color-danger: var(--error);
    --shadow-card: var(--shadow-md);
    /* التدرّج القديم كان يبدأ بـ #4687FF (أبيض عليه 3.40:1). الأزرار القديمة
       بـ /account/ بتستخدمه كخلفية، فنستبدله بتدرّج أزرق صلب ≥5.17:1. */
    --brand-gradient: linear-gradient(135deg, var(--primary-solid) 0%, var(--primary-solid-hover) 100%);
    --font-primary: var(--font-body-en);
    --font-arabic: var(--font-body-ar);
    --radius-sm: 6px;
    --radius-md: var(--radius-card);
    --radius-lg: var(--radius-modal);
    --transition-fast: var(--dur-fast) var(--ease-out);
    --transition-base: var(--dur-base) var(--ease-out);
}