/**
 * Design Tokens — CSS Custom Properties
 *
 * Toutes les variables de design du thème Bipauto.
 * Couleurs, typographie, espacement, rayons, ombres, effets glow.
 *
 * @package Bipauto
 * @since   1.0.0
 */

:root {
    /* ── Core Brand Colors ──────────────────────────────────── */
    --color-black:        #040404;
    --color-green:        #089F00;
    --color-green-light:  #6EDC4A;
    --color-green-dark:   #067A00;
    --color-white:        #FFFFFF;

    /* ── Dark Mode Palette (default) ───────────────────────── */
    --dm-bg:              #040404;
    --dm-surface-1:       #0A0A0A;
    --dm-surface-2:       #111111;
    --dm-surface-3:       #1A1A1A;
    --dm-border:          #1E1E1E;
    --dm-border-hover:    #2A2A2A;
    --dm-text:            #FFFFFF;
    --dm-text-secondary:  #B0B0B0;
    --dm-text-muted:      #6B6B6B;
    --dm-overlay:         rgba(0, 0, 0, 0.7);

    /* ── Light Mode Palette ────────────────────────────────── */
    --lm-bg:              #F5F5F5;
    --lm-surface-1:       #FFFFFF;
    --lm-surface-2:       #FAFAFA;
    --lm-surface-3:       #EEEEEE;
    --lm-border:          #E0E0E0;
    --lm-border-hover:    #CCCCCC;
    --lm-text:            #111111;
    --lm-text-secondary:  #444444;
    --lm-text-muted:      #888888;
    --lm-overlay:         rgba(0, 0, 0, 0.4);

    /* ── Semantic Colors ───────────────────────────────────── */
    --color-success:      #089F00;
    --color-warning:      #E5A100;
    --color-error:        #DC3545;
    --color-info:         #17A2B8;

    /* ── Active Theme Variables (overridden by mode classes) ─ */
    --bg:                 var(--dm-bg);
    --surface-1:          var(--dm-surface-1);
    --surface-2:          var(--dm-surface-2);
    --surface-3:          var(--dm-surface-3);
    --border:             var(--dm-border);
    --border-hover:       var(--dm-border-hover);
    --text:               var(--dm-text);
    --text-secondary:     var(--dm-text-secondary);
    --text-muted:         var(--dm-text-muted);
    --overlay:            var(--dm-overlay);

    /* ── Typography ────────────────────────────────────────── */
    --font-body:          'Inter', system-ui, -apple-system, sans-serif;
    --font-heading:       'Inter', system-ui, -apple-system, sans-serif;
    --font-arabic:        'Noto Sans Arabic', 'Segoe UI', sans-serif;

    --text-display:       clamp(2.75rem, 6vw, 4.5rem);
    --text-h1:            clamp(2rem, 4vw, 3rem);
    --text-h2:            clamp(1.5rem, 3vw, 2.25rem);
    --text-h3:            1.5rem;
    --text-h4:            1.25rem;
    --text-h5:            1rem;
    --text-h6:            0.875rem;
    --text-body:          1rem;
    --text-body-sm:       0.875rem;
    --text-caption:       0.75rem;
    --text-overline:      0.6875rem;

    --leading-tight:      1.1;
    --leading-normal:     1.5;
    --leading-relaxed:    1.7;

    --tracking-tight:     -0.02em;
    --tracking-normal:    0;
    --tracking-wide:      0.05em;

    /* ── Spacing (8px base) ────────────────────────────────── */
    --space-1:            0.25rem;   /* 4px  */
    --space-2:            0.5rem;    /* 8px  */
    --space-3:            0.75rem;   /* 12px */
    --space-4:            1rem;      /* 16px */
    --space-5:            1.25rem;   /* 20px */
    --space-6:            1.5rem;    /* 24px */
    --space-8:            2rem;      /* 32px */
    --space-10:           2.5rem;    /* 40px */
    --space-12:           3rem;      /* 48px */
    --space-16:           4rem;      /* 64px */
    --space-20:           5rem;      /* 80px */
    --space-24:           6rem;      /* 96px */

    /* ── Container Widths ──────────────────────────────────── */
    --container-sm:       640px;
    --container-md:       960px;
    --container-lg:       1200px;
    --container-xl:       1400px;
    --container-padding:  1.25rem;

    /* ── Border Radius ─────────────────────────────────────── */
    --radius-sm:          6px;
    --radius-md:          12px;
    --radius-lg:          16px;
    --radius-xl:          20px;
    --radius-2xl:         24px;
    --radius-full:        9999px;

    /* ── Shadows ────────────────────────────────────────────── */
    --shadow-sm:          0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md:          0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg:          0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-card:        0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-header:      0 2px 20px rgba(0, 0, 0, 0.4);

    /* ── Green Glow Effects ────────────────────────────────── */
    --glow-sm:            0 0 8px rgba(8, 159, 0, 0.25);
    --glow-md:            0 0 20px rgba(8, 159, 0, 0.3);
    --glow-lg:            0 0 40px rgba(8, 159, 0, 0.2);
    --glow-xl:            0 0 60px rgba(110, 220, 74, 0.15);
    --glow-border:        0 0 6px rgba(8, 159, 0, 0.4);

    /* ── Gradients ─────────────────────────────────────────── */
    --gradient-primary:   linear-gradient(135deg, #089F00, #6EDC4A);
    --gradient-dark:      linear-gradient(180deg, #040404, #0A0A0A);
    --gradient-card:      linear-gradient(180deg, #0A0A0A, #111111);
    --gradient-hero:      linear-gradient(180deg, rgba(4,4,4,0.3), rgba(4,4,4,0.95));

    /* ── Transitions ───────────────────────────────────────── */
    --ease-out:           cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-spring:        cubic-bezier(0.16, 1, 0.3, 1);
    --transition-fast:    150ms ease;
    --transition-base:    250ms ease;
    --transition-smooth:  350ms var(--ease-out);

    /* ── Z-Index Scale ─────────────────────────────────────── */
    --z-base:             0;
    --z-raised:           10;
    --z-sticky:           50;
    --z-header:           100;
    --z-drawer:           200;
    --z-modal:            300;
    --z-fab:              80;

    /* ── Header ────────────────────────────────────────────── */
    --header-height:      72px;
    --header-height-mobile: 60px;
}

/* ── Reduced motion preference ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast:   0.01ms;
        --transition-base:   0.01ms;
        --transition-smooth: 0.01ms;
    }
}