/* ══════════════════════════════════════════════
   BADIL0 Design Tokens — v2.0
   تحذير: لا تعدّل هذا الملف مباشرة.
   القيم تُكتب ديناميكياً من PHP فوق هذه الافتراضية.
══════════════════════════════════════════════ */

:root {
    /* ─── Colors ─── */
    --color-primary: #e63946;

    /* ✅ IMPORTANT: fallback ثابت قبل color-mix (دعم المتصفحات القديمة) */
    --color-primary-hover: #c1121f;
    --color-primary-hover: color-mix(in oklch, var(--color-primary), black 15%);

    --color-primary-soft: rgba(230, 57, 70, 0.1);
    --color-primary-soft: color-mix(in oklch, var(--color-primary), transparent 90%);

    --color-secondary: #1d3557;
    --color-accent: #f4a261;

    --color-bg: #ffffff;
    --color-bg-alt: #f8f9fb;
    --color-bg-elevated: #ffffff;
    --color-text: #1a1a2e;
    --color-text-secondary: #4a4a68;
    --color-text-muted: #8e8ea0;
    --color-border: #e8e8ec;
    --color-link: var(--color-primary);

    /* ─── Typography ─── */
    --font-heading: 'Tajawal', sans-serif;
    --font-body: 'Tajawal', sans-serif;
    --font-mono: 'IBM Plex Mono', monospace;

    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px — يتغير من الإعدادات */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.25rem;    /* 20px */
    --text-2xl:  1.5rem;     /* 24px */
    --text-3xl:  1.875rem;   /* 30px */

    /* ─── Spacing ─── */
    --space-xs:      4px;
    --space-sm:      8px;
    --space-md:      16px;
    --space-lg:      24px;
    --space-xl:      32px;
    --space-2xl:     48px;
    --space-section: 40px;

    /* ─── Layout ─── */
    --container-width: 1200px;
    --sidebar-width:   300px;
    /* ✅ تحذير: لا تستخدم --content-width كـ global — اضبطه في سياقه */
    /* --content-width محذوف من هنا عمداً — انظر تعليق T2 */
    --border-radius:    8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 20px;

    /* ─── Shadows ─── */
    --shadow-none: none;
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.06);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.08);
    --shadow-lg:   0 8px 30px rgba(0,0,0,0.12);
    --shadow-active: var(--shadow-sm); /* يتغير من الإعدادات */

    /* ─── Transitions ─── */
    --transition-fast:   150ms ease;
    --transition-normal: 250ms ease;
}

/* ─── Dark Mode (الآلية الوحيدة المعتمدة) ─── */
html.dark-mode {
    --color-bg:             #121218;
    --color-bg-alt:         #1a1a22;
    --color-bg-elevated:    #22222c;
    --color-text:           #e4e4e8;
    --color-text-secondary: #a0a0b0;
    --color-text-muted:     #666680;
    --color-border:         #2a2a36;
    --color-link:           var(--color-primary);
    --shadow-sm:  0 1px 3px rgba(0,0,0,0.2);
    --shadow-md:  0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:  0 8px 40px rgba(0,0,0,0.4);
}