/* ============================================================================
   TOKENS — « KINSHASA ÉDITORIAL : TERRE & SOIE »
   Variables de design (couleurs, typographie, rythme, profondeur).
   Les couleurs/polices sont écrasées à l'exécution par les réglages de la
   boutique (/admin → Vitrine) via un bloc <style> injecté dans le layout.
   ========================================================================== */

:root {
    /* --- Palette Terre & Soie (valeurs par défaut, 100 % modifiables) --- */
    --c-bg: #FAF7F2;            /* Ivoire Sablé */
    --c-surface: #FFFFFF;
    --c-surface-alt: #F2ECE4;   /* Sable clair */
    --c-ink: #141312;           /* Noir Obsidienne */
    --c-ink-soft: #4A453F;
    --c-muted: #6A645E;
    --c-line: rgba(20, 19, 18, 0.12);
    --c-line-strong: rgba(20, 19, 18, 0.24);
    --c-primary: #9E4728;       /* Terre Cuite Kongo */
    --c-primary-dark: #7E3420;
    --c-primary-soft: #F4E4DC;
    --c-accent: #C6A15B;        /* Bronze Doré */
    --c-success: #2D4739;       /* Vert Sauge — COD / stock */
    --c-success-soft: #E6EDE8;
    --c-danger: #991B1B;
    --c-danger-soft: #FEF2F2;
    --c-warning-soft: #FFFBEB;
    --c-warning: #92400E;

    /* --- Typographie --- */
    --font-serif: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif;
    --font-sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-xs: 0.75rem;
    --fs-sm: 0.8125rem;
    --fs-base: 0.9375rem;
    --fs-md: 1.0625rem;
    --fs-lg: 1.375rem;
    --fs-xl: 1.75rem;
    --fs-2xl: 2.25rem;
    --fs-3xl: 3rem;
    --fs-4xl: clamp(2.4rem, 6vw, 4.5rem);
    --lh-tight: 1.12;
    --lh-base: 1.62;
    --tracking-wide: 0.16em;
    --tracking-wider: 0.28em;

    /* --- Rythme & dimensions --- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --container: 1280px;
    --container-narrow: 780px;
    --radius-sm: 3px;
    --radius: 5px;
    --radius-lg: 10px;
    --radius-pill: 999px;

    /* --- Profondeur --- */
    --shadow-sm: 0 1px 2px rgba(20, 19, 18, 0.05);
    --shadow: 0 8px 24px rgba(20, 19, 18, 0.07);
    --shadow-lg: 0 24px 60px rgba(20, 19, 18, 0.12);
    --shadow-drawer: -24px 0 60px rgba(20, 19, 18, 0.18);

    /* --- Couches (z-index) --- */
    --z-header: 90;
    --z-drawer: 120;
    --z-overlay: 110;
    --z-toast: 150;

    /* --- Mouvement --- */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --dur-fast: 140ms;
    --dur: 260ms;
    --dur-slow: 520ms;
}

/* --- Mode sombre velouté (optionnel, activable par la boutique) --- */
[data-theme="dark"] {
    --c-bg: #11100F;
    --c-surface: #1A1917;
    --c-surface-alt: #232120;
    --c-ink: #F4EFE8;
    --c-ink-soft: #D8D2CA;
    --c-muted: #A8A29A;
    --c-line: rgba(244, 239, 232, 0.14);
    --c-line-strong: rgba(244, 239, 232, 0.28);
    --c-primary-soft: #33221B;
    --c-success-soft: #1E2A24;
    --c-danger-soft: #2C1717;
    --c-warning-soft: #2A2314;
    --shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.6);
}

/* --- Respect des préférences d'accessibilité --- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}