/* ============================================================
   TULIPE PALETTES - DESIGN TOKENS (source de vérité unique)
   Toutes les couleurs et polices de marque sont définies ici,
   une seule fois. Aucune section ne doit redéfinir un :root
   local avec ses propres couleurs/polices - voir docs/design-system.md.
   Version v4 (compromis maquettes / bois) : trois paliers de surface nettement distincts -
   fond de page crème chaud (--color-cream), surfaces claires (--color-paper : cartes, header),
   champs en creux (--color-field) - + kraft (--color-kraft) pour les bandes de contraste.
   ============================================================ */

:root {
  /* --- Couleurs de marque --- */
  --color-forest: #1F3B30;   /* vert sapin foncé - identité de marque, header, titres */
  --color-ember:  #A8362A;   /* rouge braise - CTA, accents, badges */
  --color-amber:  #9A5208;   /* ambre foncé (point du logo, assombri) - badges de promotion ; texte crème dessus ≈ 5,3:1 */
  --color-ink:    #211E1B;   /* anthracite - texte fort */
  --color-bark:   #2A1F17;   /* brun bois très sombre - grandes surfaces sombres (barre du haut, engagement, pied de page) */
  --color-cream:  #F2E9D8;   /* crème chaud - fond PAR DÉFAUT des sections (v4 : entre les maquettes ≈ #F9F7F1 et l'ancien kraft #E9DEC7) */
  --color-wood:   #6B4A34;   /* brun bois - icônes, filets décoratifs */
  --color-paper:  #FCF9F2;   /* blanc cassé chaud - cartes, header, surfaces claires posées sur le crème (v4) */
  --color-kraft:  #E4D6B8;   /* kraft/tan soutenu - fond de CONTRASTE, ponctuel (bandes) */
  --flag-de-black: #000000;  /* drapeau allemand (indicateur de marché, barre du haut) - couleurs officielles, hors palette de marque */
  --flag-de-red:   #DD0000;
  --flag-de-gold:  #FFCE00;
  --color-moss:   #4C7A5A;   /* vert mousse - badge "en stock" */
  --color-alert:  #8C3B32;   /* brun-rouge - badge rupture, erreurs */

  /* --- Typographie de marque --- */
  /* Fibres de bois : bruit étiré horizontalement, très discret. À poser sur un fond kraft avec
     background-blend-mode: multiply. Sans couleur propre (noir translucide) : suit le fond. */
  --texture-fibres: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='240'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.004 0.09' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -0.34'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.07'/%3E%3C/svg%3E");

  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;   /* titres H1-H3 */
  /* --- Rythme des sections (partagé) --- */
  --section-padding-y: clamp(48px, 6vw, 80px);            /* respiration verticale des sections (px : le rem du site vaut 12px, cf. reset.css) */
  --container-padding-x: clamp(16px, 4vw, 48px);          /* gouttière latérale (16 px sur mobile) */
  --container-max-width-wide: 1440px;                     /* largeur max des sections "grille" */
  --page-top-gap: 24px;                                   /* espace header → fil d'Ariane, identique sur toutes les pages qui en ont un */
  --band-padding-y: clamp(32px, 4vw, 56px);               /* bandeaux fins (réassurance) */
  --section-header-gap: clamp(32px, 5vw, 56px);           /* en-tête de section → contenu */
  --eyebrow-title-gap: 12px;                              /* sur-titre → titre */
  --fs-section-title: clamp(28px, 1.6vw + 22px, 48px);    /* H2 de section */
  --fs-eyebrow: 13px;

  /* --- Rayons (échelle unique, 2 à 4 px : esprit bois/artisan, angles nets) ---
     Règle : aucun border-radius en dur dans les feuilles de style. On lit ces
     tokens, sauf 0 et 50 % (éléments ronds : avatars, points, WhatsApp) et la
     pastille de comptage du panier (999px). Pour adoucir les cartes : --r-card: 6px. */
  --r-badge: 2px;      /* pastilles d'information (-20 %, En stock, avis vérifiés) */
  --r-control: 4px;    /* boutons, champs de formulaire, icônes d'en-tête, recherche */
  --r-media: 4px;      /* image posée à l'intérieur d'une carte */
  --r-card: 4px;       /* cartes (produit, catégorie, avis, FAQ), panneaux et grands visuels */

  /* --- Échelle typographique (px : le rem du site vaut 12px, cf. reset.css) --- */
  --fs-xs: 13px;                          /* méta, badges, libellés */
  --fs-sm: 14px;                          /* texte secondaire, liens, spécifications */
  --fs-base: 16px;                        /* texte courant, boutons, champs */
  --fs-lead: clamp(16px, 0.5vw + 11px, 18px); /* chapeaux, descriptions de section */
  --fs-card-title: 18px;                  /* titres de cartes */
  --btn-height: 52px;                     /* hauteur unique des boutons */
  --eyebrow-tracking: 0.14em;

  --font-sans:  "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* texte courant, UI, boutons */

  /* --- Teintes secondaires dérivées des 8 tokens de marque ---------------
     Ajoutées pour les écrans hors home : chacune sert à au moins deux
     écrans. Jamais d'hex indépendant : tout dérive de la palette. */
  --color-border: color-mix(in srgb, var(--color-wood) 24%, var(--color-cream));        /* filets, séparateurs, cartes */
  --color-border-field: color-mix(in srgb, var(--color-wood) 70%, var(--color-paper));  /* bordure de champ : ≥ 3:1 sur paper (WCAG 1.4.11) */
  --color-text-muted: color-mix(in srgb, var(--color-ink) 74%, var(--color-cream));     /* texte atténué ≥ 4,5:1 sur cream et paper */
  --color-surface-dim: color-mix(in srgb, var(--color-kraft) 40%, var(--color-cream));  /* bandeaux, panneaux, survols */
  --color-field: color-mix(in srgb, var(--color-kraft) 55%, var(--color-cream));         /* champ « en creux » sur surface claire (recherche du header) : ≈ 1,25:1 sur paper */
  --color-field-edge: color-mix(in srgb, var(--color-wood) 32%, var(--color-cream));     /* contour de ce champ */
  --color-ember-dark: color-mix(in srgb, var(--color-ember) 84%, var(--color-ink));     /* survol des CTA braise */
  --color-ember-on-dark: color-mix(in srgb, var(--color-ember) 65%, var(--color-paper)); /* braise lisible sur fond sombre (bark, ink) : ≈ 4,9:1 sur bark, 3,7:1 sur sapin (gros texte seulement) */
  --color-forest-dark: color-mix(in srgb, var(--color-forest) 84%, var(--color-ink));   /* survol des boutons sapin */
  --color-ember-tint: color-mix(in srgb, var(--color-ember) 10%, var(--color-paper));   /* fond d'alerte / erreur */
  --color-moss-tint: color-mix(in srgb, var(--color-moss) 14%, var(--color-paper));     /* fond de succès */
  --color-focus: var(--color-forest);                                                    /* anneau de focus par défaut */
  --color-overlay: color-mix(in srgb, var(--color-ink) 55%, transparent);               /* voile des dialogues */
  --fs-page-title: clamp(30px, 2.2vw + 20px, 44px);                                      /* H1 unique de tous les écrans hors home */
  --shadow-card: 0 0 0 1px color-mix(in srgb, var(--color-wood) 24%, var(--color-cream)), 0 2px 10px color-mix(in srgb, var(--color-ink) 7%, transparent); /* contour fin + ombre douce : détache les cartes du fond crème clair (v3) */
  --shadow-card-hover: 0 0 0 1px color-mix(in srgb, var(--color-wood) 36%, var(--color-cream)), 0 6px 18px color-mix(in srgb, var(--color-ink) 10%, transparent);

  /* --- Admin (back-office, v73) ---
     Gabarit des écrans de l'admin (css/admin/). Les couleurs, rayons et polices restent ceux du site. */
  --admin-sidebar-w: 248px;          /* barre latérale >= 1181 px */
  --admin-sidebar-w-compact: 72px;   /* barre latérale réduite (769 à 1180 px), icônes seules */
  --admin-row-h: 56px;               /* hauteur d'une ligne de tableau */
}