/* File: /assets/css/variables.css */
/* ─────────────────────────────────────────────────────────────
   VARIABLES CSS — Won Marketing
   Toutes les valeurs de design sont centralisées ici.
   Modifier ce fichier suffit à changer l'identité visuelle.
───────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   THÈME CLAIR (défaut)
═══════════════════════════════════════════════════════════ */
:root {
    /* ── Couleurs de marque ── */
    --clr-primary-400:   #4F6EF7;   /* Bleu principal */
    --clr-primary-500:   #3A56E8;   /* Bleu hover */
    --clr-primary-600:   #2540CC;   /* Bleu pressé */

    --clr-accent-400:    #8B5CF6;   /* Violet accent */
    --clr-accent-500:    #7C3AED;   /* Violet hover */

    /* Dégradé signature */
    --gradient-brand:    linear-gradient(135deg, #4F6EF7 0%, #8B5CF6 100%);
    --gradient-brand-r:  linear-gradient(135deg, #8B5CF6 0%, #4F6EF7 100%);
    --gradient-subtle:   linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 100%);
    --gradient-glow:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(79,110,247,.18) 0%, transparent 70%);

    /* ── Fond et surfaces ── */
    --clr-bg:            #FFFFFF;
    --clr-bg-alt:        #F8F9FF;   /* Sections alternées */
    --clr-bg-card:       #FFFFFF;
    --clr-bg-muted:      #F1F5F9;

    /* ── Glassmorphism ── */
    --glass-bg:          rgba(255, 255, 255, 0.75);
    --glass-border:      rgba(255, 255, 255, 0.60);
    --glass-shadow:      0 8px 32px rgba(31, 41, 99, 0.08);
    --glass-blur:        blur(16px);

    /* ── Texte ── */
    --clr-text-primary:  #0F1629;
    --clr-text-secondary:#3D4A6B;
    --clr-text-muted:    #6B7A99;
    --clr-text-inverse:  #FFFFFF;

    /* ── Bordures ── */
    --clr-border:        #E2E8F0;
    --clr-border-light:  #F1F5F9;
    --clr-border-focus:  #4F6EF7;

    /* ── États ── */
    --clr-success:       #10B981;
    --clr-warning:       #F59E0B;
    --clr-error:         #EF4444;
    --clr-info:          #3B82F6;

    /* ── Overlay ── */
    --clr-overlay:       rgba(15, 22, 41, 0.55);

    /* ── Navbar ── */
    --navbar-bg:         rgba(255, 255, 255, 0.85);
    --navbar-border:     rgba(226, 232, 240, 0.80);
    --navbar-shadow:     0 1px 24px rgba(15, 22, 41, 0.06);

    /* ── Scrollbar ── */
    --scrollbar-thumb:   #CBD5E1;
    --scrollbar-track:   #F1F5F9;
}

/* ═══════════════════════════════════════════════════════════
   THÈME SOMBRE
═══════════════════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Couleurs de marque — légèrement plus lumineuses pour le dark */
    --clr-primary-400:   #6B84F9;
    --clr-primary-500:   #4F6EF7;
    --clr-primary-600:   #3A56E8;

    --clr-accent-400:    #A78BFA;
    --clr-accent-500:    #8B5CF6;

    --gradient-brand:    linear-gradient(135deg, #6B84F9 0%, #A78BFA 100%);
    --gradient-brand-r:  linear-gradient(135deg, #A78BFA 0%, #6B84F9 100%);
    --gradient-subtle:   linear-gradient(135deg, #1A1F35 0%, #1E1730 100%);
    --gradient-glow:     radial-gradient(ellipse 80% 60% at 50% -10%, rgba(107,132,249,.22) 0%, transparent 70%);

    /* Fond et surfaces */
    --clr-bg:            #0B0F1E;
    --clr-bg-alt:        #111527;
    --clr-bg-card:       #161B2E;
    --clr-bg-muted:      #1E2540;

    /* Glassmorphism dark */
    --glass-bg:          rgba(22, 27, 46, 0.80);
    --glass-border:      rgba(255, 255, 255, 0.07);
    --glass-shadow:      0 8px 32px rgba(0, 0, 0, 0.35);
    --glass-blur:        blur(16px);

    /* Texte */
    --clr-text-primary:  #F0F4FF;
    --clr-text-secondary:#A8B4D4;
    --clr-text-muted:    #6B7A99;
    --clr-text-inverse:  #0B0F1E;

    /* Bordures */
    --clr-border:        #242A42;
    --clr-border-light:  #1A1F35;
    --clr-border-focus:  #6B84F9;

    /* Overlay */
    --clr-overlay:       rgba(0, 0, 0, 0.70);

    /* Navbar */
    --navbar-bg:         rgba(11, 15, 30, 0.90);
    --navbar-border:     rgba(255, 255, 255, 0.06);
    --navbar-shadow:     0 1px 24px rgba(0, 0, 0, 0.30);

    /* Scrollbar */
    --scrollbar-thumb:   #2A3150;
    --scrollbar-track:   #111527;
}

/* ═══════════════════════════════════════════════════════════
   TYPOGRAPHIE
═══════════════════════════════════════════════════════════ */
:root {
    /* Familles */
    --font-sans:   'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-display:'Inter', 'Segoe UI', system-ui, sans-serif;
    --font-mono:   'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Tailles (fluid clamp) */
    --text-xs:     clamp(0.70rem, 1.5vw, 0.75rem);
    --text-sm:     clamp(0.82rem, 1.8vw, 0.875rem);
    --text-base:   clamp(0.94rem, 2vw, 1rem);
    --text-md:     clamp(1rem, 2.2vw, 1.125rem);
    --text-lg:     clamp(1.1rem, 2.5vw, 1.25rem);
    --text-xl:     clamp(1.2rem, 3vw, 1.5rem);
    --text-2xl:    clamp(1.4rem, 3.5vw, 1.875rem);
    --text-3xl:    clamp(1.6rem, 4vw, 2.25rem);
    --text-4xl:    clamp(1.9rem, 5vw, 3rem);
    --text-5xl:    clamp(2.2rem, 6vw, 3.75rem);
    --text-6xl:    clamp(2.6rem, 7.5vw, 4.5rem);

    /* Poids */
    --fw-regular:  400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-extrabold:800;

    /* Interligne */
    --lh-tight:    1.20;
    --lh-snug:     1.35;
    --lh-normal:   1.60;
    --lh-relaxed:  1.75;

    /* Espacement lettres */
    --ls-tight:   -0.03em;
    --ls-normal:   0em;
    --ls-wide:     0.04em;
    --ls-wider:    0.08em;
}

/* ═══════════════════════════════════════════════════════════
   ESPACEMENTS
═══════════════════════════════════════════════════════════ */
:root {
    --sp-1:   0.25rem;   /*  4px */
    --sp-2:   0.5rem;    /*  8px */
    --sp-3:   0.75rem;   /* 12px */
    --sp-4:   1rem;      /* 16px */
    --sp-5:   1.25rem;   /* 20px */
    --sp-6:   1.5rem;    /* 24px */
    --sp-8:   2rem;      /* 32px */
    --sp-10:  2.5rem;    /* 40px */
    --sp-12:  3rem;      /* 48px */
    --sp-16:  4rem;      /* 64px */
    --sp-20:  5rem;      /* 80px */
    --sp-24:  6rem;      /* 96px */
    --sp-32:  8rem;      /* 128px */

    /* Sections */
    --section-py:      clamp(4rem, 8vw, 7rem);
    --section-py-sm:   clamp(2.5rem, 5vw, 4rem);
    --container-px:    clamp(1rem, 4vw, 2rem);
    --container-max:   1280px;
    --container-sm:    768px;
    --container-md:    1024px;
}

/* ═══════════════════════════════════════════════════════════
   RAYONS — BORDER RADIUS
═══════════════════════════════════════════════════════════ */
:root {
    --radius-sm:   0.375rem;  /*  6px */
    --radius-md:   0.625rem;  /* 10px */
    --radius-lg:   1rem;      /* 16px */
    --radius-xl:   1.5rem;    /* 24px */
    --radius-2xl:  2rem;      /* 32px */
    --radius-full: 9999px;
}

/* ═══════════════════════════════════════════════════════════
   OMBRES
═══════════════════════════════════════════════════════════ */
:root {
    --shadow-xs:  0 1px 3px rgba(15,22,41,.06), 0 1px 2px rgba(15,22,41,.04);
    --shadow-sm:  0 2px 8px rgba(15,22,41,.07), 0 1px 3px rgba(15,22,41,.05);
    --shadow-md:  0 4px 20px rgba(15,22,41,.09), 0 2px 6px rgba(15,22,41,.06);
    --shadow-lg:  0 10px 40px rgba(15,22,41,.12), 0 4px 12px rgba(15,22,41,.07);
    --shadow-xl:  0 20px 60px rgba(15,22,41,.15), 0 8px 20px rgba(15,22,41,.08);
    --shadow-2xl: 0 32px 80px rgba(15,22,41,.20), 0 12px 30px rgba(15,22,41,.10);

    /* Ombre colorée (boutons, cards au hover) */
    --shadow-brand:   0 8px 30px rgba(79,110,247,.30);
    --shadow-accent:  0 8px 30px rgba(139,92,246,.30);
    --shadow-brand-lg:0 16px 48px rgba(79,110,247,.35);

    /* Dark mode — ombres plus profondes */
}

[data-theme="dark"] {
    --shadow-xs:  0 1px 3px rgba(0,0,0,.25);
    --shadow-sm:  0 2px 8px rgba(0,0,0,.30);
    --shadow-md:  0 4px 20px rgba(0,0,0,.38);
    --shadow-lg:  0 10px 40px rgba(0,0,0,.45);
    --shadow-xl:  0 20px 60px rgba(0,0,0,.52);
    --shadow-2xl: 0 32px 80px rgba(0,0,0,.60);
    --shadow-brand:   0 8px 30px rgba(107,132,249,.30);
    --shadow-accent:  0 8px 30px rgba(167,139,250,.30);
    --shadow-brand-lg:0 16px 48px rgba(107,132,249,.35);
}

/* ═══════════════════════════════════════════════════════════
   TRANSITIONS & ANIMATIONS
═══════════════════════════════════════════════════════════ */
:root {
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;
    --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Easing */
    --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
    --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ═══════════════════════════════════════════════════════════
   Z-INDEX — COUCHES
═══════════════════════════════════════════════════════════ */
:root {
    --z-below:   -1;
    --z-base:     0;
    --z-raised:   10;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
    --z-top:      999;
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR
═══════════════════════════════════════════════════════════ */
:root {
    --navbar-height:        68px;
    --navbar-height-scroll: 56px;
}

/* ═══════════════════════════════════════════════════════════
   BREAKPOINTS (pour référence — utilisés en CSS via @media)
   mobile:  < 640px
   tablet:  640px – 1023px
   desktop: ≥ 1024px
   wide:    ≥ 1280px
═══════════════════════════════════════════════════════════ */