:root {
  --color-primary: #a51260; /* magenta/bordeaux — titres, accents forts */
  --color-secondary: #f39b83; /* corail — boutons, hover, bordures */
  --color-accent: #fff8f3; /* crème — fonds */
  --color-text: #1d1d1b; /* texte courant */
  --color-border-light: color-mix(
    in srgb,
    currentColor 20%,
    transparent
  ); /* gris clair — bordures au repos (WooCommerce blocks) */

  /* Variations en transparence — borders légères, fonds teintés */
  --color-primary-10: color-mix(in srgb, var(--color-primary) 10%, transparent);
  --color-primary-20: color-mix(in srgb, var(--color-primary) 20%, transparent);
  --color-primary-40: color-mix(in srgb, var(--color-primary) 40%, transparent);
  --color-secondary-10: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  --color-secondary-20: color-mix(in srgb, var(--color-secondary) 20%, transparent);
  --color-secondary-40: color-mix(in srgb, var(--color-secondary) 40%, transparent);

  --font-heading: 'Alice', serif;
  --font-body: 'brother-1816', sans-serif;

  --btn-font-weight: 200;
  --input-padding: 12px;
  --control-height: 48px;

  /* Largeur de l'image carousel — partagée avec la grille produits */
  --carousel-image-width: calc(1400px - 48px - 2em); /* 1400 max - 2×24px arrows - 2×1em gap */

  /* Rythme vertical homogène : header/main, bannière, footer, colonnes */
  --space-sm: 1em;
  --space-md: 2em;
  --space-lg: 3em;
  --space-xl: 4em;
  --space-xxl: 5em;
  --space-xxxl: 6em;

  /*Radius */
  --radius-sm: 2px;
}