/* MyArk — design tokens de la refonte lisibilité (Claude Design, 05/10/2026).
   Source : source/design/claude-design-2026-10-05/tokens.css.
   Chargé par toutes les pages éditoriales (injecté par tools/apply_layout.py).
   Les rayons sont préfixés --rayon-* : style.css utilise encore --r-* avec
   d'autres valeurs sur les gabarits non migrés. */
:root {
  /* Marque */
  --lagune: #0E7466;  --lagune-fort: #0A5A50;  --lagune-teinte: #E3F2EF;
  --encre: #0A2E29;   --miel: #E9A13B;         --miel-teinte: #FBF0DC;
  --alerte: #934A08;  /* texte et liseré d'avertissement sur miel-teinte : 6,4:1 */
  /* Neutres Lin */
  --fond: #F7F5F1;  --carte: #FFFFFF;  --subtil: #EFECE6;  --bord: #E5E1D8;
  --texte: #1D1C19;  --texte-2: #6B6862; /* 5,2:1 sur fond : small et caption seulement */
  --sur-encre: #F2EFE7;  --lien-sur-encre: #3FC3B0;

  /* Typographie : 2 polices, 7 tailles (mobile, puis bureau dès 768 px) */
  --police-titre: 'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --police-texte: 'Inter', system-ui, -apple-system, sans-serif;
  --t-display: 2.25rem;  --lh-display: 1.05;  /* 36 → 56 */
  --t-title:   1.75rem;  --lh-title:   1.15;  /* 28 → 36 */
  --t-heading: 1.375rem; --lh-heading: 1.25;  /* 22 → 24 */
  --t-lead:    1.125rem; --lh-lead:    1.5;   /* 18 → 20 */
  --t-body:    1.0625rem;--lh-body:    1.6;   /* 17 → 18 */
  --t-small:   0.9375rem;--lh-small:   1.5;   /* 15 */
  --t-caption: 0.8125rem;--lh-caption: 1.45;  /* 13 — plancher */
  --suivi-titre: -0.02em;  --suivi-caption: 0.08em;

  /* Espacement 4/8 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --gouttiere: 20px;
  --ecart-section: var(--s-7);

  /* Largeurs */
  --w-lecture: 44rem;  /* 704 px ≈ 65–72 caractères */
  --w-pleine: 70rem;   /* 1120 px */

  /* Rayons */
  --rayon-s: 8px; --rayon-m: 12px; --rayon-l: 16px; --rayon-xl: 20px; --rayon-pill: 999px;

  /* Ombre unique (cartes au survol) */
  --ombre: 0 2px 6px rgba(29,28,25,.05), 0 12px 32px rgba(29,28,25,.09);

  /* Focus et cibles */
  --focus: 3px solid var(--lagune);  --cible: 44px;
}
@media (min-width: 768px) {
  :root {
    --t-display: 3.5rem; --t-title: 2.25rem; --t-heading: 1.5rem;
    --t-lead: 1.25rem;   --t-body: 1.125rem;
    --gouttiere: 32px;   --ecart-section: var(--s-8);
  }
}
@media (prefers-color-scheme: dark) {
  :root {
    --lagune: #3FC3B0; --lagune-fort: #66D4C4; --lagune-teinte: #12312C;
    --miel: #F2B95C;   --miel-teinte: #33270F; --alerte: #F2B95C;
    --fond: #141513;   --carte: #1F211E; --subtil: #262924; --bord: #343730;
    --texte: #F5F4F0;  --texte-2: #A8A59C;
    --ombre: none;
  }
}