/* ════════════════════════════════════════════════════════════════════
   GazaPX — Brand Design Tokens  (GazaPXBrandIdentity.pdf — إصدار 1.0)
   المصدر الرسمي للهوية (docs/GazaPXBrandIdentity.pdf) كمتغيّرات CSS.
   تُحمَّل قبل phoenix.css على كل صفحة — بلا اعتماد على legacy.css.
   الألوان RGB مفصولة بمسافة لتعمل مع rgb(var(--x)/opacity).
   الاستراتيجية: كحلي Navy = الراوي/الهيكل (60%)، برتقالي محترق Accent
   = البطل/CTA (≤10%)، كريم = الأرض (خلفية هادئة)، أبيض Paper = البطاقات.
   ليست أزرق SaaS عام — هوية GazaPX من رماد غزة: جذور كحلية، انبعاث برتقالي.
   ════════════════════════════════════════════════════════════════════ */
:root {
    /* ── Navy — الكحلي من الشعار (#0B0B38 / #1E2A78) — الراوي/الهيكل ── */
    --phoenix-blue-50:  238 241 255;
    --phoenix-blue-100: 224 231 253;
    --phoenix-blue-200: 191 204 248;
    --phoenix-blue-600: 30 42 120;      /* #1E2A78 — Navy 700 (درجة أخف) */
    --phoenix-blue-700: 11 11 56;       /* #0B0B38 — Navy 900 الأساسي */
    --phoenix-blue-800: 8 8 44;
    --phoenix-blue-900: 6 6 34;         /* الفوتر/السطوح الداكنة */
    --phoenix-blue-950: 4 4 24;

    /* ── Accent — البرتقالي المحترق من الشعار (#F0661A / #D9391A) — البطل/CTA ── */
    --phoenix-flame-400: 255 140 66;    /* أفتح توهّج */
    --phoenix-flame-500: 240 102 26;    /* #F0661A — Accent 600 */
    --phoenix-flame-600: 217 57 26;     /* #D9391A — Accent 700 الأساسي */
    --phoenix-flame-700: 190 45 20;     /* أغمق طرف التدرّج */

    /* ── Accent (البرتقالي) — يستخدم كحيث كان الذهبي (CTA/تركيز/مميّز) ── */
    --phoenix-gold-100: 255 232 220;     /* توهّج خفيف برتقالي */
    --phoenix-gold-300: 255 166 106;     /* أفتح */
    --phoenix-gold-400: 240 102 26;      /* #F0661A — البرتقالي الأساسي */
    --phoenix-gold-700: 217 57 26;      /* #D9391A — text-phoenix-gold-deep */

    /* ── دلالية (Semantic — من الهوية) ── */
    --phoenix-success: 14 159 110;      /* #0E9F6E */
    --phoenix-warning: 245 158 11;      /* #F59E0B */
    --phoenix-info:    2 132 199;       /* #0284C7 */
    --phoenix-danger:  217 57 26;       /* #D9391A */

    /* ── محايد — كريم/ورق/حبر من الهوية ── */
    --bg-page:   250 250 247;           /* #FAFAF7 — Cream الخلفية العامة */
    --bg-surface: 255 255 255;          /* #FFFFFF — Paper البطاقات */
    --border-soft: 226 224 222;          /* بين Cream وInk */
    --text-body:   88 92 104;           /* #585C68 — Gray 600 نص ثانوي */
    --text-heading: 20 20 25;           /* #141419 — Ink نص أساسي */
    --text-muted:  120 122 128;
    --text-lead:   72 76 88;
    --text-on-inverse:      255 255 255;
    --text-on-inverse-muted: 210 210 214;

    /* ── الطباعة (هوية GazaPX: Cairo عربي + Space Grotesk أرقام/Display) ── */
    --font-body:    'Cairo', system-ui, sans-serif;
    --font-heading: 'Cairo', system-ui, sans-serif;
    --font-display: 'Space Grotesk', 'Cairo', system-ui, sans-serif;
    --font-micro:   'IBM Plex Sans', 'Cairo', system-ui, sans-serif;
    --text-h1:   3rem;     /* 48px */
    --text-h2:   2.25rem;  /* 36px */
    --text-lead: 1.125rem; /* 18px */

    /* ── الحركة ── */
    --dur-fast: 150ms;
    --dur-base: 250ms;
    --dur-slow: 400ms;
    --ease-phoenix: cubic-bezier(0.22, 1, 0.36, 1);

    /* ── الحواف ── */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    /* ── الإحداث ── */
    --shadow-sm: 0 1px 2px 0 rgb(20 20 25 / 0.05), 0 0 0 1px rgb(20 20 25 / 0.04);
    --shadow-md: 0 4px 6px -1px rgb(20 20 25 / 0.07), 0 2px 4px -2px rgb(20 20 25 / 0.04), 0 0 0 1px rgb(20 20 25 / 0.05);
    --shadow-lg: 0 12px 20px -4px rgb(20 20 25 / 0.10), 0 4px 8px -2px rgb(20 20 25 / 0.04), 0 0 0 1px rgb(20 20 25 / 0.06);

    color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════════
   مساعدين تفاعليين — Modern SaaS (مؤلَّفة هنا لأن phoenix.css مجمّد)
   تُستعمل بدل رموز اللون على المكوّنات الأساسية فقط (CTA).
   ═══════════════════════════════════════════════════════════════════ */

/* زر الإجراء الأولي — تدرّج البرتقالي المحترق + توهّج عند التحويم */
.phoenix-flame-btn {
    background-image: linear-gradient(135deg, rgb(var(--phoenix-flame-500)), rgb(var(--phoenix-flame-700)));
    color: #fff;
    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.08), inset 0 1px 0 0 rgb(255 255 255 / 0.22);
    transition: transform var(--dur-base) var(--ease-phoenix),
                box-shadow var(--dur-base) var(--ease-phoenix),
                background-image var(--dur-base) var(--ease-phoenix);
}
.phoenix-flame-btn:hover {
    background-image: linear-gradient(135deg, rgb(var(--phoenix-flame-400)), rgb(var(--phoenix-flame-600)));
    box-shadow: 0 14px 26px -6px rgb(var(--phoenix-flame-600) / 0.55), inset 0 1px 0 0 rgb(255 255 255 / 0.28);
}
@media (prefers-reduced-motion: reduce) {
    .phoenix-flame-btn, .phoenix-flame-btn:hover { transition: none; }
}

/* توهّج برتقالي للأزرار على السطوح الداكنة */
.phoenix-glow-gold:hover { box-shadow: 0 12px 24px -8px rgb(var(--phoenix-gold-400) / 0.5); }

/* خلفية شفق تفاعلية للهيرو — توهّجات شعاعية كحلي+برتقالي خفيفة (ثابتة) */
.phoenix-aurora {
    background-image:
        radial-gradient(50% 55% at 90% -5%, rgb(var(--phoenix-flame-500) / 0.22), transparent 70%),
        radial-gradient(60% 60% at 0% 5%, rgb(var(--phoenix-blue-700) / 0.16), transparent 70%);
}