/* =============================================================================
   TOKENS — Plein Sud  (extraits de la maquette Figma)
   Univers "plein soleil / Sud" : chaud, lumineux, épuré.
   On surcharge ici les variables --rt-* du parent + on définit nos tokens --ps-*.

   Source : Figma "PLEIN SUD MAQUETTE WEB" (header 135:10929, sec-head 53:67).
   ⚠️ À confirmer/compléter quand le quota Figma se réinitialise :
      vert olive des sections, dégradés hero/soldes, teintes exactes du footer.
   ============================================================================= */

:root {
  /* --- COULEURS MARQUE ------------------------------------------------------ */
  --ps-gold:          #c1983b; /* OR — CTA principal, bouton recherche */
  --ps-gold-dark:     #a67e2a; /* BRONZE — eyebrows / suptitres uppercase */
  --ps-terracotta:    #be5e3c; /* TERRACOTTA — soldes, badges, accents chauds */
  --ps-olive:         #6b704f; /* VERT SAUGE — sections "expertise" (à confirmer) */

  /* --- NEUTRES / SURFACES --------------------------------------------------- */
  --ps-ink:           #2a2724; /* Encre chaude — titres, texte fort, bouton panier */
  --ps-body:          #57534e; /* Texte courant */
  --ps-muted:         #757575; /* Texte secondaire, placeholders */
  --ps-line:          #e7decf; /* Bordures beige chaud */
  --ps-surface:       #ffffff; /* Fond principal */
  --ps-cream:         #faf5ec; /* Crème — header, sections douces */
  --ps-cream-soft:    #fffdf9; /* Crème très clair — inputs, cartes */
  --ps-white:         #ffffff;

  /* Déclinaisons RGB (overlays, ombres) */
  --ps-ink-rgb:       42, 39, 36;
  --ps-gold-rgb:      193, 152, 59;

  /* --- TYPOGRAPHIE ---------------------------------------------------------- */
  --ps-font-heading:  "Marcellus", Georgia, "Times New Roman", serif; /* titres */
  --ps-font-body:     "Hanken Grotesk", system-ui, -apple-system, sans-serif;

  --ps-fs-base:       15px;
  --ps-lh-base:       1.6;

  /* Échelle typographique (compacte) */
  --ps-fs-h1:         40px;
  --ps-fs-h2:         30px;  /* "Les nouveautés" */
  --ps-fs-h3:         22px;
  --ps-fs-eyebrow:    12px;  /* suptitre uppercase */
  --ps-ls-eyebrow:    0.22em; /* tracking 2.64px @12px */
  --ps-ls-heading:    -0.01em;

  /* --- ESPACEMENTS (rythme 4/8) -------------------------------------------- */
  --ps-space-1: 4px;   --ps-space-2: 8px;   --ps-space-3: 16px;
  --ps-space-4: 24px;  --ps-space-5: 40px;  --ps-space-6: 64px;  --ps-space-7: 96px;

  /* --- RAYONS & OMBRES (design épuré → doux) ------------------------------- */
  --ps-radius-pill:   999px; /* boutons, champ de recherche */
  --ps-radius:        12px;  /* cartes produit */
  --ps-radius-sm:     8px;   /* badges */
  --ps-shadow:        0 8px 30px rgba(var(--ps-ink-rgb), 0.06);
  --ps-shadow-card:   0 6px 24px rgba(var(--ps-ink-rgb), 0.05);

  /* --- LAYOUT --------------------------------------------------------------- */
  --ps-container:     1280px; /* conteneur (marges latérales 80px sur 1440) */
  --ps-content:       1216px; /* largeur de contenu interne */
}

/* --- MAPPING vers les variables du thème Blusho ---------------------------- */
/* Chargé APRÈS le CSS dynamique du parent (functions.php prio 100) → gagne. */
:root[data-theme="light-mode"],
:root {
  --rt-primary-color:     var(--ps-gold);
  --rt-primary-dark:      var(--ps-gold-dark);
  --rt-secondary-color:   var(--ps-terracotta);
  --rt-heading-color:     var(--ps-ink);
  --rt-body-color:        var(--ps-body);
  --rt-body-bg-color:     var(--ps-surface);
  --rt-border-color:      var(--ps-line);
  --rt-meta-color:        var(--ps-muted);
  --rt-meta-color2:       var(--ps-muted);
  --rt-gray-color:        var(--ps-cream);
  --rt-white-bg-color:    var(--ps-white);

  /* Boutons : CTA principal = or, texte encre/blanc géré par composant */
  --rt-button-bg-color:   var(--ps-gold);
  --rt-button-color:      var(--ps-white);
  --rt-button-text-color: var(--ps-ink);

  --rt-container-width:   1280px;
}