/*
 * ══════════════════════════════════════════════════════════════════
 *  APDG Store — Design Tokens
 *  Source : Figma "APDG — maquettes marque blanche"
 *
 *  RÈGLE FONDAMENTALE :
 *  Les tokens --color-primary-* sont les SEULES variables à
 *  surcharger par client. Tout le reste est fixe.
 *  La surcharge est injectée par inc/class-apdg-theme-customizer.php
 *  via les options ACF du sous-site.
 * ══════════════════════════════════════════════════════════════════
 */

:root {

    /* ── Palette primary (verte KB — surchargée par client) ───────── */
    --color-primary-950: #121c15;
    --color-primary-800: #283d2d;
    --color-primary-600: #3c5f43;
    --color-primary-500: #507957;
    --color-primary-200: #c4d6c5;
    --color-primary-50:  #f0f5f1;

    /* ── Palette surface (neutres — identiques tous clients) ─────── */
    --color-surface-950: #09090b;
    --color-surface-800: #27272a;
    --color-surface-600: #52525b;
    --color-surface-400: #a1a1aa;
    --color-surface-300: #d4d4d8;
    --color-surface-200: #E4E4E7;
    --color-surface-100: #f4f4f5;
    --color-surface-50:  #ffffff;

    /* ── Typographie ─────────────────────────────────────────────── */
    --font-body:     'Poppins', sans-serif;
    --font-title:    'Bitter', serif;
    --font-headline: 'Bitter', serif;

    /* Tailles */
    --text-xs:       12px;
    --text-sm:       14px;
    --text-base:     16px;
    --text-title:    24px;
    --text-headline: 40px;

    /* Line-heights */
    --lh-sm:         22px;   /* 14px body */
    --lh-base:       24px;   /* 16px body */
    --lh-title:      32px;   /* 24px title */
    --lh-headline:   52px;   /* 40px headline */

    /* Weights */
    --fw-regular:    400;
    --fw-medium:     500;
    --fw-semibold:   600;
    --fw-bold:       700;

    /* ── Espacements (basés sur le layout Figma 1440px) ──────────── */
    --container-px:  100px;   /* padding horizontal des sections */
    --container-py:  80px;    /* padding vertical des sections */
    --gap-xs:        8px;
    --gap-sm:        12px;
    --gap-md:        16px;
    --gap-lg:        24px;
    --gap-xl:        32px;
    --gap-2xl:       48px;

    /* ── Bordures ─────────────────────────────────────────────────── */
    --radius-sm:     4px;
    --radius-md:     8px;     /* cartes produits */
    --radius-full:   100px;   /* boutons, pills, avatars */

    /* ── Ombres ──────────────────────────────────────────────────── */
    --shadow-sm:     0 1px 5px rgba(0, 0, 0, 0.10);
    --shadow-md:     0 4px 4px rgba(0, 0, 0, 0.12);

    /* ── Layout ──────────────────────────────────────────────────── */
    --max-width:     1440px;
    --nav-height:    144px;
    --banner-height: 54px;
}

/*
 * Responsive — on réduit les espacements en dessous de 1440px
 * pour ne pas avoir de scroll horizontal.
 */
@media (max-width: 1280px) {
    :root {
        --max-width:     100%;
        --container-px:  60px;
    }
}

@media (max-width: 1024px) {
    :root {
        --container-px:  40px;
        --container-py:  60px;
        --text-headline: 32px;
        --lh-headline:   42px;
    }
}

@media (max-width: 768px) {
    :root {
        --container-px:  24px;
        --container-py:  40px;
        --text-headline: 26px;
        --lh-headline:   34px;
        --text-title:    20px;
        --lh-title:      28px;
    }
}