/* AMEKTI — le site public. LES JETONS.
 *
 * ⚠️ FICHIER DISTINCT de `apps/web/jetons.css`, et c'est voulu : le site et
 *    l'application ⛔ ne sont pas servis par la même chose, ⛔ ne se déploient
 *    pas ensemble, et le site ⛔ n'a pas à embarquer les jetons d'une interface
 *    connectée. ⚠️ MAIS LA MARQUE EST LA MÊME : les trois couleurs d'identité —
 *    l'accent, le papier, l'encre — sont IDENTIQUES à celles de l'application,
 *    et `tests/unit/test_site_public.py` échoue si elles divergent. Un site
 *    vitrine dont le vert n'est pas celui du produit se voit tout de suite.
 */

:root {
  /* ── L'IDENTITÉ — partagée avec l'application, VÉRIFIÉE par un test ─────── */
  --accent:        #17564a;
  --papier:        #f7f5f1;
  --encre:         #171614;

  /* ── Le reste de la palette, propre au site éditorial ───────────────────── */
  --surface:       #ffffff;
  --sable:         #efebe3;  /* alternance de sections, ⛔ jamais du gris */
  --encre-douce:   #55524c;
  --accent-clair:  #e4ede9;
  --accent-vif:    #1f7a66;
  --trait:         #e0dad0;
  --trait-fort:    #8d8779;
  --nuit:          #14201c;  /* les sections sombres, chaudes et profondes */
  --nuit-texte:    #eef1ee;
  --nuit-douce:    #a9b5b0;
  --nuit-trait:    #2b3a35;

  /* ── TYPOGRAPHIE ────────────────────────────────────────────────────────── */
  --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;
  --mono:   ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-titan:    clamp(2.75rem, 1.9rem + 4.2vw, 5.25rem);
  --t-affiche:  clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  --t-section:  clamp(1.65rem, 1.35rem + 1.5vw, 2.5rem);
  --t-sous:     clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem);
  --t-corps:    1.0625rem;
  --t-petit:    0.9375rem;
  --t-menu:     0.8125rem;

  --graisse-titan: 700;
  --graisse-forte: 640;
  --graisse-demi:  560;
  --graisse-corps: 400;

  --serre-titan: -0.035em;
  --serre-titre: -0.02em;
  --ouvert:       0.14em;

  --interligne-titre: 1.05;
  --interligne-corps: 1.65;

  /* ── ESPACE ─────────────────────────────────────────────────────────────── */
  --e1: 0.25rem;  --e2: 0.5rem;   --e3: 0.75rem;  --e4: 1rem;
  --e5: 1.5rem;   --e6: 2rem;     --e7: 3rem;     --e8: 4.5rem;
  --e9: 7rem;     --e10: 10rem;

  /* ── FORME ──────────────────────────────────────────────────────────────── */
  --r-petit: 6px;
  --r-moyen: 12px;
  --r-grand: 20px;
  --r-tres-grand: 28px;
  --r-plein: 999px;

  --filet: 1px;
  --filet-epais: 2px;

  --ombre-douce:   0 1px 2px rgb(23 22 20 / 4%), 0 4px 16px rgb(23 22 20 / 5%);
  --ombre-portee:  0 2px 6px rgb(23 22 20 / 5%), 0 24px 60px rgb(23 22 20 / 11%);
  --ombre-produit: 0 4px 12px rgb(23 22 20 / 7%), 0 40px 90px rgb(23 22 20 / 16%);

  --duree: 220ms;
  --courbe: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ── MESURES ────────────────────────────────────────────────────────────── */
  --largeur-page:    76rem;
  --largeur-texte:   38rem;
  --largeur-etroite: 30rem;
  --securite-haut:   env(safe-area-inset-top, 0px);
}

/* ⚠️ Le site public reste en thème CLAIR, à dessein : c'est une page de
 *    présentation, lue une fois, souvent depuis un lien. Les sections sombres
 *    sont un CHOIX DE COMPOSITION — ⛔ pas un thème système. */

@media (prefers-reduced-motion: reduce) {
  :root { --duree: 0ms; }
}