/* ====================================================================
   VARIABLES.CSS — Jetons de design (source unique de vérité visuelle)
   Site : Laure Trevisan, pédicure-podologue — La Bonneville-sur-Iton
   Toute nouvelle valeur de couleur / typo / espace doit être ajoutée ici,
   jamais écrite en dur ailleurs. Voir design.md pour la justification.
   ==================================================================== */

:root {

  /* ---- Couleurs — fond ---- */
  --color-paper: #FBF7F1;        /* blanc cassé, fond général */
  --color-sable: #F1E6D8;        /* beige sable, sections alternées */
  --color-sable-dark: #E4D5C0;   /* beige sable soutenu, cartes/bordures */
  --color-white: #FFFFFF;

  /* ---- Couleurs — accent principal (vert sauge, apaisant) ---- */
  --color-sauge: #6E8B6A;
  --color-sauge-dark: #52684F;   /* hover / texte sur fond clair */
  --color-sauge-light: #E4EBE2;  /* fond léger (badges, bandeau réassurance) */

  /* ---- Couleurs — accent secondaire (bleu profond, sobre) ---- */
  --color-bleu: #2F4858;
  --color-bleu-dark: #1E313C;
  --color-bleu-light: #E4EAEC;

  /* ---- Couleurs — texte ---- */
  --color-text: #3A342C;         /* gris chaud foncé, texte courant */
  --color-text-muted: #6B6255;   /* légendes, méta, texte secondaire */
  --color-text-inverse: #FBF7F1; /* texte sur fond foncé */

  /* ---- Couleurs — état / information (jamais de rouge décoratif) ---- */
  --color-info: #2F4858;         /* rappels, encarts « à savoir » */
  --color-alerte: #A9631A;       /* ambre sobre — jamais de rouge anxiogène */
  --color-alerte-bg: #F5E9DA;

  /* ---- Bordures / séparateurs ---- */
  --color-border: #E4D9C9;
  --color-border-strong: #CBB99E;

  /* ---- Typographie — familles ---- */
  --font-titres: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-corps: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Typographie — échelle (mobile-first, corps 18px minimum) ---- */
  --fs-sm: 0.9375rem;   /* 15px — mentions légales, méta */
  --fs-base: 1.125rem;  /* 18px — corps de texte */
  --fs-lg: 1.25rem;     /* 20px — intro, chapeau */
  --fs-h4: 1.375rem;    /* 22px */
  --fs-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);   /* 24 → 30px */
  --fs-h2: clamp(1.875rem, 1.6rem + 1.2vw, 2.5rem);    /* 30 → 40px */
  --fs-h1: clamp(2.25rem, 1.85rem + 1.8vw, 3.375rem);  /* 36 → 54px */

  --lh-body: 1.6;
  --lh-titres: 1.2;

  /* ---- Espacements (échelle 4px) ---- */
  --space-2xs: 0.5rem;   /* 8px */
  --space-xs: 1rem;      /* 16px */
  --space-sm: 1.5rem;    /* 24px */
  --space-md: 2.5rem;    /* 40px */
  --space-lg: 4rem;      /* 64px */
  --space-xl: 6rem;      /* 96px */

  /* ---- Rayons / ombres ---- */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(58, 52, 44, 0.08);
  --shadow-md: 0 8px 24px rgba(58, 52, 44, 0.10);
  --shadow-lg: 0 16px 48px rgba(58, 52, 44, 0.14);

  /* ---- Mise en page ---- */
  --container-max: 1180px;
  --container-narrow: 780px;

  /* ---- Zones tactiles (accessibilité) ---- */
  --tap-min: 48px;

  /* ---- Transitions ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 480ms;
}