/* ========================================
   NEXUS by Eklil — Design Tokens
   ----------------------------------------
   الثيم الداكن هو الافتراضي. الفاتح يُشتقّ من لوحة العرض
   التقديمي الفعلية (الكحلي #1F3864 والأردوازي #59647A
   والكحلي العميق #0E1B3A) — لا بقلب الداكن آلياً.
   لون التمييز برتقالي وفق القسم 2.1 من الدراسة، بدرجة
   أغمق في الوضع الفاتح لأن #F97316 على الأبيض = 2.8:1 فقط.
   ======================================== */

:root {
    color-scheme: dark;

    /* --- Sovereign Blue --- */
    --color-primary: #1E5AA8;
    --color-primary-light: #2E7BD6;
    --color-primary-bright: #4A9BEA;
    --color-primary-dark: #123A6E;
    --color-primary-soft: rgba(46, 123, 214, 0.12);
    --color-primary-line: rgba(46, 123, 214, 0.28);

    /* --- Tech Orange --- */
    --color-secondary: #F97316;
    --color-secondary-light: #FB923C;
    --color-secondary-soft: rgba(249, 115, 22, 0.12);
    --color-secondary-line: rgba(249, 115, 22, 0.3);
    --color-on-secondary: #1B1206;

    /* --- Surfaces --- */
    --color-bg-dark: #070E1A;
    --color-bg-section: #0B1424;
    --color-card-bg: #111C2E;
    --color-card-bg-hover: #16243A;
    --color-footer-bg: #050A13;
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-strong: rgba(255, 255, 255, 0.14);
    --color-surface-wash: rgba(255, 255, 255, 0.04);
    --color-surface-wash-2: rgba(255, 255, 255, 0.02);
    --color-header-bg: rgba(7, 14, 26, 0.82);
    --color-header-bg-scrolled: rgba(7, 14, 26, 0.97);

    /* --- Text --- */
    --color-text-white: #F2F6FC;
    --color-text-body: #C3CFE0;
    --color-text-gray: #8FA3BC;
    --color-text-muted: #7D8CA3;

    /* --- Semantic --- */
    --color-success: #22C55E;
    --color-success-text: #86EFAC;
    --color-success-soft: rgba(34, 197, 94, 0.1);
    --color-success-line: rgba(34, 197, 94, 0.24);
    --color-danger: #EF4444;
    --color-danger-text: #FCA5A5;
    --color-danger-soft: rgba(239, 68, 68, 0.1);
    --color-danger-line: rgba(239, 68, 68, 0.26);
    --color-warning: #EAB308;

    /* --- لوحة الرسوم: درجات مُصادَقة للسطح الداكن #111C2E --- */
    --viz-surface: #111C2E;
    --viz-series-1: #3987e5;
    --viz-series-2: #d95926;
    --viz-series-3: #199e70;
    --viz-neutral: #4A5A72;
    --viz-grid: rgba(255, 255, 255, 0.07);
    --viz-axis: rgba(255, 255, 255, 0.16);
    --viz-label: #8FA3BC;
    --viz-value: #F2F6FC;
    --viz-muted: #7D8CA3;
    --viz-on-series: #FFFFFF;
    --viz-track: rgba(255, 255, 255, 0.05);

    /* --- Typography --- */
    --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
    --font-en: 'Inter', 'IBM Plex Sans', system-ui, sans-serif;

    /* --- Layout --- */
    --header-height: 72px;
    --container-max: 1200px;
    --container-pad: 24px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-lg: 20px;
    --radius-pill: 999px;
    --section-pad: 96px;

    /* --- Motion --- */
    --transition-fast: 0.18s ease;
    --transition-base: 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* --- Elevation --- */
    --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
    --shadow-primary: 0 10px 34px rgba(30, 90, 168, 0.36);

    /* --- Hero glow --- */
    --glow-primary: rgba(30, 90, 168, 0.38);
    --glow-secondary: rgba(249, 115, 22, 0.13);
}

/* ============================================================
   الوضع الفاتح — درجات مختارة لا مقلوبة.
   مشتقّة من ألوان العرض التقديمي: #1F3864 · #2A4A7F · #0E1B3A · #59647A
   ============================================================ */
:root[data-theme="light"] {
    color-scheme: light;

    --color-primary: #1F3864;
    --color-primary-light: #2A4A7F;
    --color-primary-bright: #1A5296;
    --color-primary-dark: #0E1B3A;
    --color-primary-soft: rgba(31, 56, 100, 0.08);
    --color-primary-line: rgba(31, 56, 100, 0.22);

    /* #F97316 على الأبيض = 2.8:1 — غير كافٍ للنص، فتُغمَّق */
    --color-secondary: #AD4E09;
    --color-secondary-light: #E8731A;
    --color-secondary-soft: rgba(194, 86, 10, 0.09);
    --color-secondary-line: rgba(194, 86, 10, 0.26);
    --color-on-secondary: #FFFFFF;

    --color-bg-dark: #FFFFFF;
    --color-bg-section: #F4F6FA;
    --color-card-bg: #FFFFFF;
    --color-card-bg-hover: #F8FAFD;
    --color-footer-bg: #EEF2F8;
    --color-border: rgba(14, 27, 58, 0.11);
    --color-border-strong: rgba(14, 27, 58, 0.2);
    --color-surface-wash: rgba(14, 27, 58, 0.035);
    --color-surface-wash-2: rgba(14, 27, 58, 0.02);
    --color-header-bg: rgba(255, 255, 255, 0.85);
    --color-header-bg-scrolled: rgba(255, 255, 255, 0.97);

    --color-text-white: #0E1B3A;
    --color-text-body: #2E3C52;
    --color-text-gray: #59647A;
    --color-text-muted: #5C6A80;

    --color-success: #15803D;
    --color-success-text: #116B33;
    --color-success-soft: rgba(21, 128, 61, 0.08);
    --color-success-line: rgba(21, 128, 61, 0.24);
    --color-danger: #B23A3A;
    --color-danger-text: #9F2F2F;
    --color-danger-soft: rgba(178, 58, 58, 0.07);
    --color-danger-line: rgba(178, 58, 58, 0.22);
    --color-warning: #8A5206;

    /* درجات مُصادَقة للسطح الأبيض (all-pairs) */
    --viz-surface: #FFFFFF;
    --viz-series-1: #2a78d6;
    --viz-series-2: #eb6834;
    --viz-series-3: #1baf7a;
    --viz-neutral: #7C8AA0;
    --viz-grid: rgba(14, 27, 58, 0.09);
    --viz-axis: rgba(14, 27, 58, 0.22);
    --viz-label: #59647A;
    --viz-value: #0E1B3A;
    --viz-muted: #5C6A80;
    --viz-on-series: #FFFFFF;
    --viz-track: rgba(14, 27, 58, 0.07);

    --shadow-card: 0 12px 34px rgba(14, 27, 58, 0.1);
    --shadow-primary: 0 10px 28px rgba(31, 56, 100, 0.24);
    --glow-primary: rgba(31, 56, 100, 0.12);
    --glow-secondary: rgba(194, 86, 10, 0.07);
}

@media (max-width: 768px) {
    :root {
        --header-height: 64px;
        --section-pad: 64px;
        --container-pad: 20px;
    }
}