/* ══════════════════════════════════════════════════════════════
   BADIL0 Design Tokens — v4.0
   ─────────────────────────────────────────────────────────────
   ⚠️ لا تعدّل هذا الملف مباشرة.
   القيم الافتراضية هنا. يتم تجاوزها من PHP في wp_head عبر:
   badil0_output_design_tokens() → <style id="badil0-dynamic-tokens">
   ────────────────────────────────────────────────────────────── */

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

    /* ✅ T1 Fix: 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);
    --color-link-hover: var(--color-primary-hover);

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

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  1.875rem;

    /* ─── 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;
    /* ✅ T2 Fix: --content-width غير معرّف هنا — يُحسب في السياق فقط */

    --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 ─── */
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);
}