/* charte.css : les jetons de la charte (docs/designer-charter.md), définis une fois (spec site-astro, REQ-3, D-2, Q-5).
   Là où la base (le site de Website, au rendu validé) s'écarte de la charte, la valeur de la base l'emporte, et le
   commentaire le dit. Aucune couleur n'est écrite ailleurs : les feuilles (src/styles/) et les composants ne lisent que
   ces jetons. Les boutons (un seul composant, src/components/Bouton.astro) prennent ici leur forme, une pilule par
   défaut, et les couleurs de leurs deux variantes, pleine et contour : en changer, c'est changer ces lignes.
   ::backdrop, le voile d'un <dialog> (la fenêtre de /assets/facade-integration.js), reçoit les mêmes jetons : il n'hérite
   de l'élément que dans les navigateurs de 2024 et après ; avant, var() n'y résolvait rien. */

:root, ::backdrop {
  /* ─── Couleurs principales (charte §1) ─── */
  --ink: #0d0d0b;
  --cream: #f7f5f0;
  --white: #fff;
  --teal: #0e7c5e;

  /* ─── Variations ink (opacité) ─── */
  --ink-70: #0d0d0bb3;
  --ink-40: #0d0d0b66;
  --ink-20: #0d0d0b33;            /* base seule : bordures des boutons à contour */
  --ink-10: #0d0d0b1a;            /* base : 0,1 ; la charte dit 0,08 */
  --ink-08: #0d0d0b0f;            /* 0,06, comme la charte */
  --ink-05: #0d0d0b0d;            /* base seule : fonds très légers */
  --border: var(--ink-10);

  /* ─── Variations teal ─── */
  --teal-light: #e0f2eb;
  --teal-mid: #1da87e;
  --teal-dark: #0a6a50;
  --teal-08: #0e7c5e14;           /* base seule : halos, ombres et surlignages */
  --teal-10: #0e7c5e1a;
  --teal-12: #0e7c5e1f;
  --teal-15: #0e7c5e26;
  --teal-20: #0e7c5e33;
  --teal-30: #0e7c5e4d;
  --teal-40: #0e7c5e66;
  --teal-50: #0e7c5e80;
  --teal-mid-20: #1da87e33;
  --teal-vif-80: #0ec88ccc;       /* base seule : le badge « Populaire » des offres */

  /* ─── Fonds ─── */
  --cream-2: #efece4;             /* base seule */
  --cream-0: #f7f5f000;           /* base seule : fin du fondu de la barre du haut */
  --ink-teal: #12241e;            /* modèle d'article (docs/article-template) : fin du dégradé du CTA, depuis --ink */

  /* ─── Couleurs fonctionnelles ─── */
  --amber: #c8620a;
  --amber-light: #fdf0e3;
  --amber-pale: #fff8f4;          /* base seule : bulle de suggestion de l'accueil */
  --amber-10: #c8620a1a;
  --amber-12: #c8620a1f;
  --amber-18: #c8620a2e;
  --amber-25: #c8620a40;
  --red: #b23325;                 /* base ; la charte dit #b83232 */
  --red-light: #fbeceb;           /* base ; la charte dit #fdeaea */
  --red-vif-20: #d94a3a33;        /* base seule : bordure du message d'erreur du formulaire */

  /* ─── Blancs translucides (sur fond ink : le registre de transparence) ─── */
  --white-08: #ffffff14;
  --white-50: #ffffff80;
  --white-60: #ffffff99;
  --white-70: #ffffffb3;
  --white-80: #ffffffcc;

  /* ─── Masques et transparence ─── */
  --black: #000;                  /* opaque, pour les masques */
  --transparent: #0000;

  /* ─── Avatars à initiales (dégradés de la base) ─── */
  --avatar-rose: linear-gradient(135deg, rgb(190, 24, 93), rgb(157, 23, 77));
  --avatar-vert: linear-gradient(135deg, #0e7c5e, #1da87e);

  /* ─── Ombres (charte §4) ─── */
  --shadow-sm: 0 1px 3px #0000000f, 0 4px 16px #0000000a;
  --shadow-lg: 0 8px 32px #0000001a;
  --shadow-glow-teal: 0 0 0 1px #0e7c5e26, 0 4px 24px #0e7c5e1f;

  /* ─── Rayons (charte §4) ─── */
  --radius-full: 9999px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-2xl: 16px;

  /* ─── Polices (charte §2 ; fichiers : src/polices/) ─── */
  --font-serif: "DM Serif Display", Georgia, serif;
  --font-sans: "DM Sans", system-ui, sans-serif;
  --font-mono: "DM Mono", monospace;

  /* ─── Mouvement (base) ─── */
  --ease: cubic-bezier(.16, 1, .3, 1);

  /* ─── Boutons (REQ-3, Q-5) ─── */
  --bouton-rayon: 50px;                       /* pilule ; var(--radius-lg) pour des boutons arrondis */
  --bouton-offre-rayon: var(--radius-lg);     /* base : 8 px sur les offres de l'accueil */
  --bouton-plein-fond: var(--teal);
  --bouton-plein-texte: var(--white);
  --bouton-contour-texte: var(--ink);
  --bouton-contour-bordure: var(--ink-20);
  --bouton-contour-accent: var(--teal);       /* survol du contour */
}