/* ==========================================================================
   Kaniel Beauty & Accessoires — système de design (jetons)
   Partagé par l'espace client (shop.css) et l'espace boutique (style.css).
   Polices libres (licence OFL) hébergées ici : Playfair Display (titres), Jost (texte).
   ========================================================================== */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-500.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-700.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-500-italic.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/jost-400.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/jost-500.woff2) format('woff2')}
@font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/jost-600.woff2) format('woff2')}

:root{
  /* --- Couleurs de marque --- */
  --noir:#0b0a08; --noir-2:#17140d; --noir-3:#241f12;
  --or:#c9a24b; --or-clair:#ecd089; --or-fonce:#8f6f22;
  --creme:#f6f2ea; --creme-2:#efe8d9; --blanc:#ffffff;
  --rose:#f1dad6; --rose-fonce:#b4766f;               /* rose poudré : accent secondaire */

  /* --- Texte et filets --- */
  --texte:#17130b; --texte-doux:#6b6454; --ligne:#e7dfcd;

  /* --- États --- */
  --ok:#1f7a53; --alerte:#a86a10; --erreur:#b23a3a; --info:#3d5aa8;

  /* --- Typographie --- */
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --t-xs:.78rem; --t-sm:.9rem; --t-md:1rem; --t-lg:1.18rem; --t-xl:1.5rem; --t-2xl:2rem; --t-3xl:clamp(2rem,4.4vw,3.1rem);

  /* --- Espacement (échelle de 4 px) --- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:72px;

  /* --- Rayons, ombres, mouvement --- */
  --r-s:10px; --r-m:14px; --r-l:20px; --r-pill:999px;
  --ombre-s:0 1px 2px rgba(23,19,11,.06);
  --ombre-m:0 2px 4px rgba(23,19,11,.05),0 12px 28px rgba(23,19,11,.08);
  --ombre-l:0 4px 8px rgba(23,19,11,.06),0 24px 48px rgba(23,19,11,.14);
  --focus:0 0 0 3px rgba(201,162,75,.45);
  --rapide:.15s; --moyen:.25s; --ease:cubic-bezier(.2,.7,.2,1);

  /* --- Couches --- */
  --z-bar:30; --z-menu:60; --z-modal:90; --z-toast:100;
}

/* Les animations respectent la préférence « réduire les animations » du téléphone ou de l'ordinateur. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}