/* ============================================================
   AFELTA — Unified CSS Variables
   [P-01] Design System tokens مركزية لكل الصفحات
   الإصدار: 1.0 — 2026-05-30
   يُحمّل في: frontend/layouts/app.blade.php قبل أي CSS آخر
============================================================ */

:root {
    /* ── Brand Colors ── */
    --af-primary:       #e85d2f;
    --af-primary-dk:    #c94820;
    --af-primary-dkr:   #a83010;
    --af-primary-lt:    #fff4f0;
    --af-primary-lt2:   #ffe8de;
    --af-primary-glow:  rgba(232, 93, 47, 0.14);
    --af-primary-ring:  rgba(232, 93, 47, 0.15);
    --af-primary-shadow: rgba(232, 93, 47, 0.20);

    /* ── Neutral Colors ── */
    --af-white:         #ffffff;
    --af-black:         #1a1a1a;
    --af-bg:            #f4f1ee;
    --af-surface:       #fdfcfb;
    --af-surface-2:     #f9fafb;
    --af-border:        #e5e1dc;
    --af-border-2:      #e5e7eb;
    --af-text:          #1a1a1a;
    --af-text-mid:      #4b5563;
    --af-muted:         #6b7280;
    --af-light:         #9ca3af;

    /* ── Status Colors ── */
    --af-green:         #16a34a;
    --af-green-lt:      #f0fdf4;
    --af-green-border:  #86efac;
    --af-red:           #dc2626;
    --af-red-lt:        #fef2f2;
    --af-red-border:    #fca5a5;
    --af-amber:         #f59e0b;
    --af-amber-lt:      #fffbeb;
    --af-blue:          #3b82f6;
    --af-blue-lt:       #eff6ff;

    /* ── Layout ── */
    --af-container:     1200px;
    --af-container-lg:  1280px;
    --af-container-sm:  860px;

    /* ── Border Radius ── */
    --af-radius-xs:     4px;
    --af-radius-sm:     8px;
    --af-radius:        14px;
    --af-radius-lg:     20px;
    --af-radius-xl:     28px;
    --af-radius-full:   9999px;

    /* ── Shadows ── */
    --af-shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.05);
    --af-shadow:        0 4px 20px rgba(0, 0, 0, 0.07);
    --af-shadow-lg:     0 8px 32px rgba(0, 0, 0, 0.12);
    --af-shadow-xl:     0 20px 60px rgba(0, 0, 0, 0.09);

    /* ── Typography ── */
    --af-font:          'Cairo', sans-serif;
    --af-font-size-xs:  0.7rem;
    --af-font-size-sm:  0.8rem;
    --af-font-size-md:  0.9375rem;
    --af-font-size-lg:  1.0625rem;
    --af-font-size-xl:  1.25rem;

    /* ── Transitions ── */
    --af-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --af-dur:           200ms;
    --af-dur-slow:      400ms;

    /* ── Z-index Stack ── */
    --af-z-base:        1;
    --af-z-dropdown:    100;
    --af-z-sticky:      200;
    --af-z-modal:       300;
    --af-z-overlay:     400;
    --af-z-toast:       500;

    /* ── Spacing ── */
    --af-gap-xs:        0.375rem;
    --af-gap-sm:        0.625rem;
    --af-gap:           0.875rem;
    --af-gap-lg:        1.25rem;
    --af-gap-xl:        2rem;
}

/* ── Dark Mode Foundation [P-04] ── */
@media (prefers-color-scheme: dark) {
    :root {
        --af-bg:        #0f172a;
        --af-surface:   #1e293b;
        --af-surface-2: #1a2535;
        --af-border:    #334155;
        --af-border-2:  #2d3748;
        --af-text:      #f1f5f9;
        --af-text-mid:  #94a3b8;
        --af-muted:     #64748b;
        --af-light:     #475569;
        --af-white:     #1e293b;
        --af-black:     #f1f5f9;
    }
}