/* ============================================================
   TOKENS — annesoeapas.fr
   Palette verrouillée : anne-sophie/CLAUDE.md §7
   Ratios WCAG 2.2 AA vérifiés (texte ≥4,5:1 / UI ≥3:1) — cf. concepts/accessibilite-web-fr (G6)
   ============================================================ */
:root {
  /* --- Palette brute (NE PAS utiliser directement : passer par les rôles ci-dessous) --- */
  --color-brun: #3d2817;
  --color-peche: #ddb5a0;
  --color-menthe: #c5e3d0;
  --color-bleu: #cfe3ea;
  --color-charbon: #1a1a1a;
  --color-blanc-casse: #fdf8f3;

  /* --- Rôles sémantiques texte/fond --- */
  --text: var(--color-charbon);            /* texte courant — 16,5:1 sur --bg */
  --text-invert: var(--color-blanc-casse); /* texte sur fond brun — 13,1:1 */
  --bg: var(--color-blanc-casse);          /* fond de page */
  --heading: var(--color-brun);            /* titres & accents forts — 13,1:1 sur --bg */
  --accent: var(--color-brun);             /* bordures/icônes UI — ≥7:1 sur pastels */

  /* --- Fonds de section pastel (texte charbon dessus = 9–13:1) --- */
  --bg-peche: var(--color-peche);
  --bg-menthe: var(--color-menthe);
  --bg-bleu: var(--color-bleu);

  /* --- Interactif --- */
  --focus: var(--color-brun);   /* anneau focus — fort sur blanc ET pastels */
  --link: var(--color-brun);
  --link-hover: var(--color-charbon);
  --btn-bg: var(--color-brun);
  --btn-text: var(--color-blanc-casse);
  /* ⚠️ Bouton pastel autorisé UNIQUEMENT avec bordure --accent (pastel/blanc = 1,8:1 FAIL) */

  /* --- Cibles tactiles (WCAG 2.2 SC 2.5.8) --- */
  --target-min: 24px;     /* minimum AA */
  --target-comfort: 44px; /* confort (AAA) — recommandé pour boutons/CTA mobile */

  /* --- Typographie (familles self-host déclarées dans fonts.css) --- */
  --font-heading: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  /* --- Espacement (rythme) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;

  /* --- Rythme de section (NOUVEAU — 2026-06-04, échelle 8-pt centralisée) --- */
  --space-7: 4rem;   /* 64px  */
  --space-8: 6rem;   /* 96px  */
  --space-9: 8rem;   /* 128px */
  --section-py: clamp(2.5rem, 6vw, 4rem);  /* 40 → 64px — rythme entre sections */
  --hero-py:    clamp(3.5rem, 8vw, 6rem);  /* 56 → 96px — hero/above-the-fold */

  /* --- Divers --- */
  --radius: 8px;
  --maxw: 72rem; /* largeur max du contenu */
  /* Ombre douce STATIQUE (photos/cartes) — jamais animée (cf. animations-web-2026 :
     box-shadow massif/animé = jank Safari/iOS + CLS). Profondeur « luxe discret ». */
  --shadow: 0 6px 20px rgb(26 26 26 / 0.12);
}