/* =========================================================================
   HEAD SPA By Jennif'Hair — Design tokens
   Source de vérité unique. Aucune valeur en dur ailleurs dans le thème.
   =========================================================================

   PALETTE : mesurée au pixel sur les maquettes (fiable).
   ÉCHELLES typo/espacement : DÉFINIES, non mesurées.
     Les maquettes sont en 1024x1536 (format de génération, pas un canvas
     de design) — aucune valeur px n'y est récupérable. L'échelle ci-dessous
     est une échelle modulaire cohérente avec les proportions observées.
     À ajuster à l'œil sur la maquette, puis à figer.
   ========================================================================= */

:root {

  /* ---------------------------------------------------------------------
     COULEURS — mesurées, ne pas modifier sans re-sampling
     --------------------------------------------------------------------- */
  --c-brand:            #A55457;  /* bordeaux rose : CTA pleins, footer      */
  --c-brand-dark:       #8E4649;  /* état hover des CTA                      */
  --c-accent:           #B06165;  /* rose titre : mots accentués des H1      */
  --c-gold:             #B99364;  /* or/bronze : icônes, script, filets      */
  --c-gold-light:       #D8BE99;  /* filets fins, bordures dorées discrètes  */

  --c-text:             #2B2320;  /* texte courant, brun chaud (jamais noir) */
  --c-text-soft:        #6B6259;  /* descriptifs, sous-titres, légendes      */

  --c-bg:               #FDF2EA;  /* fond cream dominant                     */
  --c-bg-alt:           #F8E9E1;  /* fond rose pâle, sections alternées      */
  --c-surface:          #FFFFFF;  /* cartes, encadrés                        */
  --c-border:           #E8D8C8;  /* bordures cartes et filets               */

  /* ---------------------------------------------------------------------
     TYPOGRAPHIE
     Trois rôles. Les familles réelles restent À TRANCHER (non identifiables
     depuis un JPG compressé) — un seul point à changer ici.
     --------------------------------------------------------------------- */
  --ff-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --ff-script:  "Parisienne", "Brush Script MT", cursive;
  --ff-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* Échelle modulaire ~1.25 (tierce majeure), base 16px */
  --fs-xs:      0.8125rem;  /* 13px — mentions légales, micro-labels        */
  --fs-sm:      0.875rem;   /* 14px — nav, labels icônes, boutons           */
  --fs-base:    1rem;       /* 16px — corps de texte                        */
  --fs-md:      1.125rem;   /* 18px — chapô, intro de section               */
  --fs-lg:      1.5rem;     /* 24px — titres de carte, prix                 */
  --fs-xl:      2rem;       /* 32px — H3                                    */
  --fs-2xl:     2.75rem;    /* 44px — H2 de section (NOS RITUELS)           */
  --fs-3xl:     4rem;       /* 64px — H1 de page intérieure                 */
  --fs-display: 5.5rem;     /* 88px — "HEAD SPA" du hero accueil            */

  --lh-tight:   1.1;        /* titres display                               */
  --lh-heading: 1.25;       /* titres courants                              */
  --lh-body:    1.7;        /* corps de texte                               */

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* Interlettrage : le design tracke fortement les capitales serif */
  --ls-normal:  0;
  --ls-wide:    0.08em;     /* titres H2/H3 en capitales                    */
  --ls-wider:   0.15em;     /* nav, labels d'icônes, boutons                */

  /* ---------------------------------------------------------------------
     ESPACEMENT — base 4px
     --------------------------------------------------------------------- */
  --sp-1:   0.25rem;   /*   4px */
  --sp-2:   0.5rem;    /*   8px */
  --sp-3:   0.75rem;   /*  12px */
  --sp-4:   1rem;      /*  16px */
  --sp-6:   1.5rem;    /*  24px */
  --sp-8:   2rem;      /*  32px */
  --sp-12:  3rem;      /*  48px */
  --sp-16:  4rem;      /*  64px */
  --sp-24:  6rem;      /*  96px */
  --sp-32:  8rem;      /* 128px — respiration verticale entre sections      */

  /* ---------------------------------------------------------------------
     LAYOUT
     --------------------------------------------------------------------- */
  --w-content:  1200px;   /* largeur de contenu standard                    */
  --w-wide:     1400px;   /* sections larges                                */
  --w-text:     68ch;     /* longueur de ligne confortable                  */
  --gutter:     var(--sp-6);

  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-pill: 999px;   /* boutons CTA du header                          */

  --shadow-card: 0 2px 12px rgba(43, 35, 32, 0.06);

  /* ---------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------- */
  --ease:       cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:   150ms;
  --dur-base:   300ms;
}

/* Plancher qualité : respecter la préférence système */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* -------------------------------------------------------------------------
   ÉCHELLE FLUIDE — les gros titres doivent réduire en mobile,
   sinon débordement horizontal garanti sur le hero.
   ------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root {
    --fs-display: 3.5rem;
    --fs-3xl:     2.75rem;
    --fs-2xl:     2rem;
    --sp-32:      4rem;
    --sp-24:      3rem;
  }
}

@media (max-width: 600px) {
  :root {
    --fs-display: 2.5rem;
    --fs-3xl:     2rem;
    --fs-2xl:     1.625rem;
    --fs-xl:      1.375rem;
    --sp-32:      3rem;
    --sp-24:      2rem;
    --gutter:     var(--sp-4);
  }
}