/**
 * Design tokens — Comme à Paname V2
 * Source de vérité : 07-DESIGN-SYSTEM-UX-UI-V2.md, Partie A.1.
 * Aucune autre feuille du thème ne doit redéfinir une couleur, une police ou
 * une valeur d'espacement en dur : tout passe par ces variables, pour qu'un
 * changement de palette ou de typographie se fasse à un seul endroit.
 */

:root{

  /* --- Couleurs --- */
  --cream:            #FBF5EC;
  --cream-deep:        #F3E7D3;
  --champagne:         #E9DCC3;
  --taupe:             #4A3B2E;
  --taupe-soft:        #7A6A57;
  --ink:               #2B2320;
  --terracotta:        #C1714A;
  /* BUG CORRIGÉ (revue de code, Lot 11, audit de contraste WCAG AA réel par
     calcul, pas une estimation) : #A85D3A ne donnait que 4.00:1 sur
     --cream-deep, où cette couleur sert de texte (.price-tag, .price-now).
     Nouvelle valeur vérifiée ≥4.5:1 sur cream/cream-deep/white en texte, et
     blanc dessus ≥4.5:1 pour les boutons. */
  --terracotta-deep:   #975334;
  --sage:              #7C8B6F;
  --sage-deep:         #5E6B53;
  --white:             #FFFFFF;
  /* BUG CORRIGÉ (revue de code, Lot 11) : #5E7A54 ne donnait que 3.92-4.42:1
     selon le fond (utilisée par .newsletter-message-success). Nouvelle valeur
     vérifiée ≥4.5:1 sur cream/cream-deep/white. */
  --success:           #546D4B;
  --alert:             #B4543A;

  /* Couleur d'accent contextuelle : terracotta par défaut (univers grand public),
     re-déclarée en sage sur .pro (cf. inc/woocommerce-setup.php::capv2_body_classes). */
  --accent:            var(--terracotta);
  --accent-deep:       var(--terracotta-deep);

  /* --- Typographie --- */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Jost', -apple-system, BlinkMacSystemFont, sans-serif;

  --text-h1-mobile:  1.9rem;
  --text-h1-desktop: 2.85rem;
  --text-h2-mobile:  1.5rem;
  --text-h2-desktop: 2rem;
  --text-h3-mobile:  1.15rem;
  --text-h3-desktop: 1.3rem;
  --text-body:       1rem;
  --text-small:      0.85rem;
  --text-eyebrow:    0.72rem;

  /* --- Espacement (échelle base 4px) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* --- Rayons : signature "arche parisienne" asymétrique --- */
  --radius-card:   4px 24px 4px 4px;
  --radius-card-sm: 4px 16px 4px 4px;
  --radius-arch:   220px 220px 12px 12px;
  --radius-btn:    2px;
  --radius-pill:   999px;
  --radius-field:  3px;

  /* --- Ombre unique de référence --- */
  --shadow-hover: 0 16px 30px -18px rgba(74, 59, 46, .35);
  --shadow-arch:  0 30px 60px -25px rgba(74, 59, 46, .35);

  /* --- Grille --- */
  --container-max: 1180px;
  --container-pad-mobile: 24px;
  --container-pad-desktop: 5%;

  /* --- Durée de transition --- */
  --transition-fast: 200ms ease;
  --transition-base: 250ms ease;
}

/* Contexte Pro : bascule l'accent de terracotta vers sage (cf. design system A.1
   "terracotta = univers familles, sage = univers Pro"). Une seule classe suffit
   à réhabiller tous les composants qui utilisent var(--accent). */
body.pro{
  --accent: var(--sage);
  --accent-deep: var(--sage-deep);
}