/* ==========================================================================
   WYBE - Efresio — Design tokens
   Extraits de la maquette Claude Design "EFRESIO V3 La Signature".
   ========================================================================== */

:root {
  /* --- Typographies --- */
  --ef-font-serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --ef-font-sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Fonds & surfaces --- */
  --ef-bg: #EEF0F0;          /* fond général */
  --ef-bg-alt: #E6E9E9;      /* fond alterné (sections) */
  --ef-surface: #FCFDFC;     /* cartes / surfaces claires */
  --ef-surface-2: #F4F6F5;   /* aplats visuels produits */

  /* --- Encres (textes) --- */
  --ef-ink: #1B211F;         /* texte courant */
  --ef-ink-strong: #161B19;  /* titres */
  --ef-ink-60: #4A524E;      /* paragraphes secondaires */
  --ef-ink-45: #6A726E;      /* légendes */
  --ef-ink-35: #8A928E;      /* labels discrets */
  --ef-ink-30: #9BA39E;      /* placeholders */

  /* --- Marque --- */
  --ef-green: #1E3A34;       /* vert signature (boutons, sections sombres) */
  --ef-green-hover: #284c43;
  --ef-green-deep: #123029;
  --ef-teal: #2E8B7F;        /* accent surtitres / liens hover */
  --ef-mint: #5FC0A6;        /* accent vif (badges, points) */
  --ef-footer: #161B19;      /* fond footer */

  /* --- Accents familles olfactives (configurateur) --- */
  --ef-fam-frais: #2E8B7F;
  --ef-fam-boise: #6B4A2C;
  --ef-fam-floral: #A65A6E;
  --ef-fam-epice: #8A4632;
  --ef-fam-frais-soft: #DCEBE7;
  --ef-fam-boise-soft: #E8E1D8;
  --ef-fam-floral-soft: #EDDFE3;
  --ef-fam-epice-soft: #EBDFD9;

  /* --- Bordures --- */
  --ef-border: rgba(27, 33, 31, 0.08);
  --ef-border-strong: rgba(27, 33, 31, 0.14);
  --ef-border-soft: rgba(27, 33, 31, 0.06);

  /* --- Rayons --- */
  --ef-r-sm: 9px;
  --ef-r-md: 12px;
  --ef-r-lg: 16px;
  --ef-r-xl: 22px;
  --ef-r-2xl: 26px;
  --ef-r-pill: 999px;

  /* --- Ombres --- */
  --ef-shadow-card: 0 30px 55px -28px rgba(27, 33, 31, 0.4);
  --ef-shadow-pop: 0 22px 50px -18px rgba(27, 33, 31, 0.28);
  --ef-shadow-float: 0 40px 80px -40px rgba(27, 33, 31, 0.4);

  /* --- Layout --- */
  --ef-maxw: 1320px;
  --ef-gutter: 40px;

  /* --- Courbe d'animation signature --- */
  --ef-ease: cubic-bezier(.22, 1, .36, 1);
}

@media (max-width: 720px) {
  :root { --ef-gutter: 22px; }
}