/**
 * cpp-design-tokens.css — Master design tokens Costume Privé Paris
 * Cycle 5 Sprint 2 — 2026-05-12
 *
 * SOURCE UNIQUE DE VÉRITÉ pour toutes les couleurs, fonts, spacings, shadows.
 * Modifier une valeur ici = changement propagé partout sur le site.
 *
 * RÈGLE BRAZO AUTONOMIE : Brazo peut éditer ce seul fichier via FTP/Plesk
 * pour changer un token (ex: gold) sans toucher 5+ fichiers CSS.
 *
 * Architecture :
 *   1. Tokens CANONICAL `--cpp-*` (validés proto V3 Brazo, source de vérité)
 *   2. Variantes legacy préservées : `--cpp-navy-violet` (#1a1a2e ex-cpb/cp),
 *      `--cpp-navy-deep` (#0a1628 ex-cp-product), `--cpp-gold-warm` (#c9a96e ex-cpb)
 *   3. Aliases rétrocompatibles `--cpb-*` et `--cp-*` pointent vers les canonicals
 *      (avec fallback hardcodé pour zero-break si master absent)
 *
 * Chargement : injecté en TÊTE de toutes les pages via head.tpl
 * Priorité : 1 (avant tous les autres CSS)
 */

:root {
  /* ——— COULEURS BRAND CANONICAL (proto V3 validé Brazo) ——————————————— */

  /* Navy — couleurs sombres principales */
  --cpp-navy:         #1d2a3a;  /* canonical home/header V3 */
  --cpp-navy-dark:    #142031;  /* variante plus sombre (CTA hover) */
  --cpp-navy-deep:    #0a1628;  /* historique cp-product, très sombre */
  --cpp-navy-violet:  #1a1a2e;  /* historique cpb (blog) + custom CMS */
  --cpp-navy-violet-light: #16213e;  /* historique custom CMS */
  --cpp-navy-product-light: #142240;  /* historique cp-product */

  /* Gold — accents */
  --cpp-gold:         #a17738;  /* canonical home/header V3 */
  --cpp-gold-dark:    #8a6530;  /* hover, états foncés */
  --cpp-gold-light:   #d4b88a;  /* variante canonical V3 light */
  --cpp-gold-warm:    #c9a96e;  /* historique cpb/cp (gold brunâtre alternative) */
  --cpp-gold-warm-light: #dfc08a;  /* historique cp-product */
  --cpp-gold-warm-soft: #e8d8b8;  /* historique cpb soft */
  --cpp-gold-warm-pale: #e8d5a3;  /* historique custom */

  /* Texte foncé */
  --cpp-ink:          #1a1a1a;
  --cpp-ink-soft:     #2a2a2a;
  --cpp-text:         #1c1917;
  --cpp-text-secondary: #44403c;
  --cpp-black:        #111111;

  /* Cream / backgrounds clairs */
  --cpp-cream:        #f8f6f2;  /* canonical V3 */
  --cpp-cream-warm:   #f5f1ea;  /* beige historique */
  --cpp-cream-warmer: #ede7d8;  /* beige warm historique */
  --cpp-cream-cool:   #fafaf9;  /* historique cpb */
  --cpp-cream-sand:   #f8f5f0;  /* historique cp-product */
  --cpp-cream-shell:  #f8f6f3;  /* historique custom */

  --cpp-white:        #ffffff;

  /* Muted (gris) */
  --cpp-muted-fg:     #6b6b6b;
  --cpp-muted-border: #e8e4dc;
  --cpp-muted-line:   #e8e3d8;
  --cpp-muted-border-soft: #e8e0d4;
  --cpp-gray-100:     #f5f5f5;
  --cpp-gray-200:     #e8e8e8;
  --cpp-gray-400:     #a0a0a0;
  --cpp-gray-600:     #666666;
  --cpp-gray-800:     #2a2a2a;

  /* Shadow */
  --cpp-shadow-soft:  0 2px 12px rgba(20, 18, 14, 0.06);
  --cpp-shadow-card:  0 8px 32px rgba(20, 18, 14, 0.10);
  --cpp-shadow-light: rgba(26, 26, 46, 0.08);

  /* ——— TYPOGRAPHIE ———————————————————————————————————————————— */
  --cpp-font-heading: 'Josefin Sans', 'Helvetica Neue', sans-serif;
  --cpp-font-body:    'Raleway', system-ui, sans-serif;
  /* Cormorant restreint à signatures éditoriales (cpphome-founder-promise) */
  --cpp-font-editorial: 'Cormorant Garamond', Georgia, serif;

  /* ——— TRANSITIONS ———————————————————————————————————————————— */
  --cpp-ease:         cubic-bezier(0.2, 0.8, 0.2, 1);
  --cpp-ease-smooth:  cubic-bezier(0.4, 0, 0.2, 1);
  --cpp-ease-bounce:  cubic-bezier(0.34, 1.56, 0.64, 1);
  --cpp-ease-product: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --cpp-duration:     300ms;
  --cpp-duration-fast: 150ms;
  --cpp-duration-slow: 600ms;

  /* ——— CONTAINER ———————————————————————————————————————————————— */
  --cpp-container-max: 1280px;
  --cpp-container-px-mobile:  20px;
  --cpp-container-px-tablet:  32px;
  --cpp-container-px-desktop: 40px;

  /* ——— RETROCOMPAT — Aliases pour ne pas casser le code legacy ————————
     Ces aliases pointent vers les tokens canonical ci-dessus.
     Fallback hardcodé pour zero-break si master file pas chargé.
     ———————————————————————————————————————————————————————————— */

  /* Aliases --cpb-* (blog) — historique préservé via gold-warm + navy-violet */
  --cpb-navy:      var(--cpp-navy-violet, #1a1a2e);
  --cpb-gold:      var(--cpp-gold-warm, #c9a96e);
  --cpb-gold-soft: var(--cpp-gold-warm-soft, #e8d8b8);
  --cpb-cream:     var(--cpp-cream-cool, #fafaf9);
  --cpb-line:      var(--cpp-muted-line, #e8e3d8);
  --cpb-text:      var(--cpp-navy-violet, #1a1a2e);
  --cpb-muted:     var(--cpp-muted-fg, #6b6b6b);

  /* Aliases --cp-* (cms/product/custom) */
  --cp-navy:       var(--cpp-navy-violet, #1a1a2e);
  --cp-navy-light: var(--cpp-navy-violet-light, #16213e);
  --cp-gold:       var(--cpp-gold-warm, #c9a96e);
  --cp-gold-light: var(--cpp-gold-warm-pale, #e8d5a3);
  --cp-cream:      var(--cpp-cream-shell, #f8f6f3);
  --cp-text:       var(--cpp-text, #1c1917);
  --cp-text-secondary: var(--cpp-text-secondary, #44403c);
  --cp-border:     var(--cpp-muted-border-soft, #e8e0d4);
  --cp-shadow:     var(--cpp-shadow-light, rgba(26, 26, 46, 0.08));
  --cp-ease:       var(--cpp-ease-smooth, cubic-bezier(0.4, 0, 0.2, 1));
  --cp-bounce:     var(--cpp-ease-bounce, cubic-bezier(0.34, 1.56, 0.64, 1));
  --cp-white:      var(--cpp-white, #ffffff);
  --cp-gray-100:   var(--cpp-gray-100, #f5f5f5);
  --cp-gray-200:   var(--cpp-gray-200, #e8e8e8);
  --cp-gray-400:   var(--cpp-gray-400, #a0a0a0);
  --cp-gray-600:   var(--cpp-gray-600, #666666);
  --cp-gray-800:   var(--cpp-gray-800, #2a2a2a);
  --cp-black:      var(--cpp-black, #111111);
  --cp-transition: var(--cpp-ease-product, cubic-bezier(0.25, 0.46, 0.45, 0.94));

  /* Aliases --cp-* variants product (specific override) */
  --cp-navy-deep:  var(--cpp-navy-deep, #0a1628);
  --cp-navy-product-light: var(--cpp-navy-product-light, #142240);
  --cp-gold-warm-light: var(--cpp-gold-warm-light, #dfc08a);

  /* Aliases --hv3-* (header — déjà aligné avec cpp, pour cohérence) */
  --hv3-ink:          var(--cpp-ink, #1a1a1a);
  --hv3-ink-soft:     var(--cpp-ink-soft, #2a2a2a);
  --hv3-cream:        var(--cpp-cream, #f8f6f2);
  --hv3-gold:         var(--cpp-gold, #a17738);
  --hv3-gold-light:   var(--cpp-gold-light, #d4b88a);
  --hv3-navy:         var(--cpp-navy, #1d2a3a);
  --hv3-navy-dark:    var(--cpp-navy-dark, #142031);
  --hv3-muted-fg:     var(--cpp-muted-fg, #6b6b6b);
  --hv3-muted-border: var(--cpp-muted-border, #e8e4dc);
  --hv3-white:        var(--cpp-white, #ffffff);
}

/* ——— SPRINT 4 CYCLE 5 (2026-05-12) — Fix SVG fill global ———
   Cause : modules/ybc_blog/views/css/blog_all.css ligne 27 déclare
   `svg { fill: currentColor }` sans aucun scope, ce qui remplit
   TOUS les SVG outline du site (header, footer, modules CPP, …).
   Conséquence : icônes search/account/cart apparaissent remplies noires
   sur catalog/product/blog/CMS/RDV au lieu d'outline thin comme sur la home.
   Fix : restore fill=none quand le SVG a explicitly fill="none" en HTML.
   Les SVG du blog YBC qui veulent être remplis utilisent fill="currentColor"
   en HTML directement, donc pas impactés par cette règle.
   —————————————————————————————————————————————————————————— */
svg[fill="none"] {
  fill: none !important;
}