/* ============================================================================
 * LLA Shop Blocks — Design Tokens v1.0
 *
 * Couleurs, typographie, espacement, radius, shadows.
 * Tous les composants Shop\* utilisent ces tokens — modifier ici se propage
 * partout. Compatible avec le mode admin (futur Milestone 1.5).
 *
 * Inspiration : Etsy / Amazon / Leroy Merlin avec palette LLA (gold + brun).
 * ============================================================================ */

:root {
    /* ─── Couleurs marque LLA (palette du mockup) ────────────────── */
    --lla-color-text:           #2d2419;          /* brun chaud foncé — titres */
    --lla-color-text-muted:     #6b5d4e;          /* gris-brun chaud — vendor, meta */
    --lla-color-text-light:     #8a7e70;
    --lla-color-bg:             #ffffff;
    --lla-color-bg-soft:        #faf7f2;          /* fond doux beige */
    --lla-color-bg-card:        #ffffff;

    --lla-color-accent:         #30251D;          /* brun très foncé — prix, CTA principal (charte LLA) */
    --lla-color-accent-hover:   #1d160f;
    --lla-color-accent-soft:    #f4eee5;          /* fond chip actif (beige clair) */

    --lla-color-success:        #2f7d32;
    --lla-color-warning:        #c97a13;
    --lla-color-error:          #b3251a;
    --lla-color-promo:          #b3251a;          /* badge promo / sale */

    --lla-color-border:         #e9e2d4;
    --lla-color-border-strong:  #d4c9b3;

    /* ─── Typographie (charte LLA) ───────────────────────────────── */
    /* Sans : Outfit pour le corps de texte, sidebars, boutons.
       Serif : Cormorant Garamond pour les titres H1 et accents éditoriaux. */
    --lla-font-sans:    'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --lla-font-serif:   'Cormorant Garamond', Georgia, 'Times New Roman', serif;

    --lla-fs-xs:        12px;
    --lla-fs-sm:        13px;
    --lla-fs-base:      14px;
    --lla-fs-md:        15px;
    --lla-fs-lg:        17px;
    --lla-fs-xl:        20px;
    --lla-fs-2xl:       24px;
    --lla-fs-3xl:       32px;
    --lla-fs-4xl:       40px;

    --lla-lh-tight:     1.2;
    --lla-lh-normal:    1.5;
    --lla-lh-relaxed:   1.7;

    /* ─── Espacement (8px scale) ─────────────────────────────────── */
    --lla-space-1:      4px;
    --lla-space-2:      8px;
    --lla-space-3:      12px;
    --lla-space-4:      16px;
    --lla-space-5:      20px;
    --lla-space-6:      24px;
    --lla-space-8:      32px;
    --lla-space-10:     40px;
    --lla-space-12:     48px;
    --lla-space-16:     64px;

    /* ─── Layout ─────────────────────────────────────────────────── */
    --lla-shop-max-width:     1440px;
    --lla-shop-sidebar-width: 260px;
    --lla-shop-gap:           24px;
    --lla-shop-header-h:      80px;     /* hauteur header pour sticky offset */

    /* ─── Borders & shadows ──────────────────────────────────────── */
    --lla-radius-sm:    4px;
    --lla-radius-md:    8px;
    --lla-radius-lg:    12px;
    --lla-radius-xl:    16px;
    --lla-radius-full:  9999px;

    --lla-shadow-sm:    0 1px 2px rgba(45, 36, 25, 0.05);
    --lla-shadow-md:    0 2px 8px rgba(45, 36, 25, 0.08);
    --lla-shadow-lg:    0 8px 24px rgba(45, 36, 25, 0.12);

    /* ─── Transitions ────────────────────────────────────────────── */
    --lla-transition:   180ms ease;
}

/* Honor user prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    :root { --lla-transition: 0ms; }
}