/* ==========================================================================
   Tokens du thème - variables CSS reprises du design Direction A.
   Toute valeur utilisée plus de deux fois (couleur, typo, ombre, espace)
   doit avoir un token ici plutôt que d'être hardcodée dans une section.
   ========================================================================== */

:root {
    /* - Couleurs - */
    --m-cream:        #FFF8F1;   /* fond papier principal */
    --m-cream-2:      #FDECEF;   /* fond de section secondaire (rosé pâle) */
    --m-rose:         #F6B6C8;   /* accent doux */
    --m-peach:        #FFD6B5;   /* pêche */
    --m-lavender:     #DCC8FF;   /* lavande claire */
    --m-sky:          #BFE8FF;   /* bleu doux */
    --m-mint:         #CDEFD8;   /* menthe */
    --m-ink:          #4A3832;   /* texte principal - brun chaud */
    --m-ink-2:        #7B625A;   /* texte secondaire */
    --m-gold:         #D8A85F;   /* accent CTA / signature */

    /* - Ombres « papier » - */
    --m-paper-shadow: 0 30px 60px -30px rgba(74,56,50,.18),
                      0 8px 24px -12px rgba(74,56,50,.12);
    --m-soft-shadow:  0 8px 24px -12px rgba(74,56,50,.12);

    /* - Typographies - */
    --m-font-display: 'Cormorant Garamond', Georgia, serif;   /* italic 400/500 */
    --m-font-hand:    'Caveat', cursive;                       /* manuscrit, accents seulement */
    --m-font-body:    'Nunito', system-ui, sans-serif;         /* corps */

    /* - Échelle typographique - */
    --m-fs-h1:    clamp(2.5rem, 4vw + 1rem, 5.25rem);   /* 40 → 84px */
    --m-fs-h2:    clamp(1.875rem, 2vw + 1rem, 3rem);    /* 30 → 48px */
    --m-fs-h3:    clamp(1.25rem, 1vw + 0.75rem, 1.75rem); /* 20 → 28px */
    --m-fs-body:  1rem;                                  /* 16px */
    --m-fs-lead:  1.0625rem;                             /* 17px - accroches */
    --m-fs-small: 0.8125rem;                             /* 13px */
    --m-fs-caption: 0.6875rem;                           /* 11px - eyebrow */
    --m-fs-hand:  1.375rem;                              /* 22px - par défaut Caveat */

    /* - Espaces - */
    --m-space-xs:  0.25rem;
    --m-space-sm:  0.5rem;
    --m-space:     1rem;
    --m-space-md:  1.5rem;
    --m-space-lg:  2.5rem;
    --m-space-xl:  4rem;
    --m-space-xxl: 6rem;

    /* - Géométrie - */
    --m-radius-sm:    4px;
    --m-radius:       8px;
    --m-radius-pill:  999px;
    --m-container:    1280px;
    --m-page-padding: 56px;     /* padding horizontal des sections desktop */

    /* - Animation - */
    --m-ease:     cubic-bezier(.2, .7, .2, 1);
    --m-fast:     150ms;
    --m-medium:   300ms;
    --m-slow:     600ms;
}

/* Respecte la préférence "réduire les animations" du système. */
@media (prefers-reduced-motion: reduce) {
    :root {
        --m-fast:   1ms;
        --m-medium: 1ms;
        --m-slow:   1ms;
    }
}