/**
 * Design tokens — source de vérité unique.
 *
 * Ne JAMAIS coder une couleur ou une taille en dur ailleurs dans le CSS.
 * Le Customizer surcharge ces valeurs via un <style> inline injecté en <head>
 * (voir inc/design.php).
 *
 * Palette inspirée Aloe Paris : off-white tiède + noir profond + vert sapin
 * + gold pour les promos. Premium, clinique, naturel.
 */

:root {
    /* ---- Couleurs sémantiques ---- */
    --color-bg:           #fafaf7;
    --color-surface:      #f4f2ec;
    --color-surface-2:    #ebe8df;
    --color-text:         #111111;
    --color-text-soft:    #2a2a2a;
    --color-muted:        #6b6b6b;
    --color-border:       #e5e2d9;
    --color-divider:      #ebebeb;

    --color-brand:        #1f4d3d;   /* vert sapin — accents secondaires */
    --color-brand-hover:  #163b2e;
    --color-brand-soft:   #e7eee9;

    --color-cta:          #111111;   /* CTA principal noir */
    --color-cta-hover:    #000000;
    --color-cta-text:     #ffffff;

    --color-promo:        #b89868;   /* gold (badges, urgence promo) */
    --color-promo-text:   #ffffff;

    --color-success:      #1f4d3d;
    --color-danger:       #b3261e;

    /* Trustpilot officiel (ne pas modifier — charte externe) */
    --color-tp-5: #00b67a;
    --color-tp-4: #73cf11;
    --color-tp-3: #ffce00;
    --color-tp-2: #ff8622;
    --color-tp-1: #ff3722;
    --color-tp-0: #dcdce6;

    /* ---- Typographie ---- */
    --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;

    --text-xs:      0.75rem;
    --text-sm:      0.875rem;
    --text-base:    1rem;
    --text-lg:      1.125rem;
    --text-xl:      1.375rem;
    --text-2xl:     1.75rem;
    --text-3xl:     2.25rem;
    --text-4xl:     clamp(2.25rem, 4vw, 3.25rem);

    --leading-tight:  1.15;
    --leading-snug:   1.35;
    --leading-normal: 1.6;

    --tracking-tight: -0.01em;
    --tracking-normal: 0;
    --tracking-wide:  0.04em;
    --tracking-wider: 0.08em;

    --weight-regular: 400;
    --weight-medium:  500;
    --weight-semibold: 600;
    --weight-bold:    700;
    --weight-black:   800;

    /* ---- Espacements (échelle 4px) ---- */
    --space-1:  0.25rem;
    --space-2:  0.5rem;
    --space-3:  0.75rem;
    --space-4:  1rem;
    --space-5:  1.5rem;
    --space-6:  2rem;
    --space-7:  2.5rem;
    --space-8:  3rem;
    --space-10: 4rem;
    --space-12: 6rem;

    /* ---- Rayons ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;

    /* ---- Layout ---- */
    --container-max: 1200px;
    --container-narrow: 760px;
    --container-pad: 1rem;

    /* ---- Ombres ---- */
    --shadow-sm: 0 1px 2px rgba(17, 17, 17, 0.06);
    --shadow-md: 0 6px 18px rgba(17, 17, 17, 0.08);
    --shadow-cta: 0 4px 0 rgba(0, 0, 0, 0.85);

    /* ---- Transitions ---- */
    --transition-fast: 120ms ease;
    --transition-base: 180ms ease;
}
