/*
 * ITF Theme — CSS Variables (Design Tokens)
 * Les valeurs sont overridées dynamiquement via le Customizer (functions.php)
 */

:root {
    /* ── Palette de marque ITF (modifiable via Apparence → Personnaliser) ──── */
    /* Couleurs — overridées par le Customizer */
    --color-primary:    #1e8379;
    --color-secondary:  #2d5c40; /* assombri : 7.8:1 sur blanc (était 4.67:1) */
    --color-accent:     #f6a502;
    --color-text:       #1c1c1c;
    --color-bg:         #ffffff;

    /* ── Palette étendue ITF ─────────────────────────────────────────────── */
    /* Neutres */
    --palette-black:       #030304;
    --palette-gray:        #979797;
    --palette-gray-light:  #DCDDDC;
    /* Bleus / marine */
    --palette-navy:        #3D5165;
    --palette-sky:         #A1D2F0;
    /* Verts / teals */
    --palette-teal:        #1E8379;
    --palette-mint:        #80C7B4;
    --palette-sage:        #C8DCAB;
    /* Rouges / roses */
    --palette-muted-red:   #965B5B;
    --palette-coral:       #EE786E;
    --palette-blush:       #FAC8C0;

    /* Couleurs dérivées (calculées) */
    --color-primary-light:  color-mix(in srgb, var(--color-primary) 15%, white);
    --color-primary-dark:   color-mix(in srgb, var(--color-primary) 85%, black);
    --color-surface:        #f8f8f6;
    --color-surface-alt:    #f2f4f0;
    --color-border:         #dde3d8;
    --color-muted:          #6b7a72;

    /* Typographie — overridée par le Customizer */
    --font-heading: 'Barlow', sans-serif;
    --font-body:    'Inter', sans-serif;

    /* Tailles de police */
    --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;
    --text-4xl:  2.25rem;
    --text-5xl:  3rem;

    /* Poids de police */
    --font-light:   300;
    --font-normal:  400;
    --font-medium:  500;
    --font-semi:    600;
    --font-bold:    700;

    /* Interlignage */
    --leading-tight:  1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.8;

    /* Espacement */
    --space-1:   0.25rem;
    --space-2:   0.5rem;
    --space-3:   0.75rem;
    --space-4:   1rem;
    --space-5:   1.25rem;
    --space-6:   1.5rem;
    --space-8:   2rem;
    --space-10:  2.5rem;
    --space-12:  3rem;
    --space-16:  4rem;
    --space-20:  5rem;
    --space-24:  6rem;

    /* Rayon de bordure */
    --radius-sm:  4px;
    --radius-md:  8px;
    --radius-lg:  12px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:  0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
    --shadow-lg:  0 10px 30px rgba(0,0,0,.1), 0 4px 8px rgba(0,0,0,.04);

    /* ── Boutons (modifiables via Apparence → Personnaliser → Boutons) ──────── */
    --btn-primary-bg:      var(--color-primary);
    --btn-primary-text:    #ffffff;
    --btn-primary-hover:   #155f58;
    --btn-secondary-bg:    #155f58;
    --btn-secondary-text:  #ffffff;
    --btn-accent-bg:       var(--color-accent);
    --btn-accent-text:     #1c1c1c;
    --btn-radius:          var(--radius-md);
    --btn-outline-hover-bg:   var(--color-primary);   /* survol outline → fond plein vert */
    --btn-outline-hover-text: #ffffff;                /* survol outline → texte blanc */

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

    /* Layout */
    --container-max:    1200px;
    --container-padding: 1.5rem;
    --header-height:    96px;
}

/* Mode sombre (optionnel, respecte les préférences système) */
@media (prefers-color-scheme: dark) {
    :root {
        --color-text:    #e8ede9;
        --color-bg:      #111a13;
        --color-surface: #1a2a1c;
        --color-border:  #2d4030;
        --color-muted:   #8fa694;
    }
}