/* =============================================================================
   tokens.css — LA SOURCE DES VALEURS (charte-graphique-ux.md §10)

   Règle n°1 de la gouvernance CSS : aucun hex ni px « en dur » ailleurs que dans ce
   fichier. Tout le reste du CSS référence ces variables. Distillé du prototype validé
   (maquettes/prototype-votreconvention-ecrans.html).
   ============================================================================= */

:root {
  /* --- couleurs : Palette A, entérinée le 2026-07-26 ----------------------- */
  --primary: #22344f;
  --primary-h: #1a2a41;
  --on-primary: #ffffff;
  /* Texte SECONDAIRE sur fond marine (menu du back-office) : sous-titres, rôle du compte.
     ⚠️ Calculé à partir des deux couleurs qu'il sépare, jamais figé : la maquette portait trois
     gris distincts (#dfe6f1, #c9d3e2, #9fb0c9) qu'un changement de marine aurait laissés en
     place — donc désaccordés, sans que rien ne le signale. */
  --on-primary-attenue: color-mix(in srgb, #ffffff 68%, #22344f);

  --accent: #a9823c;
  --accent-h: #8f6d30;
  --accent-ink: #8f6d30; /* accent en TEXTE sur fond clair : contraste AA */
  --on-accent: #2a2410;

  --ink: #17223a;
  --muted: #5a6377;
  --ground: #f4f6f9;
  --surface: #ffffff;
  --line: #e1e5ec;

  /* couleurs sémantiques : elles signifient un ÉTAT, jamais un décor */
  --success: #2e7d5b;
  --warning: #9a6712;
  --danger: #b3453c;
  --info: #2e4a6e;

  /* lavis dérivés — fonds des actions secondaires.
     Dérivés du PRIMAIRE et non d'une couleur sémantique (cf. règle ci-dessus). */
  --primary-wash: color-mix(in srgb, var(--primary) 12%, var(--surface));
  --primary-wash-h: color-mix(in srgb, var(--primary) 19%, var(--surface));
  --danger-wash: color-mix(in srgb, var(--danger) 10%, var(--surface));
  --danger-wash-h: color-mix(in srgb, var(--danger) 17%, var(--surface));
  /* ⚠️ Pendant du précédent, pour les **bandeaux de confirmation** [2026-08-06]. C'est le seul
     lavis dérivé d'une couleur sémantique avec `--danger-wash` — la règle ci-dessus vise le
     décor, or un bandeau de résultat EST un état : c'est précisément ce que la charte §4 autorise.
     12 % comme les chips (charte §5), et non 10 % : sur le vert, 10 % vire au gris. */
  --success-wash: color-mix(in srgb, var(--success) 12%, var(--surface));

  /* --- typographie -------------------------------------------------------- */
  /* Polices auto-hébergées à terme (charte §3) : aucun CDN, la CSP l'interdit. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* échelle de type (charte §3) — s'y tenir */
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  /* Boutons et champs de saisie : une graduation sous le corps de texte, pour que la
     commande ne pèse pas plus lourd que ce qu'elle commande. */
  --t-15: 15px;
  --t-16: 16px; /* corps */
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-30: 30px;
  --t-38: 38px;
  --t-48: 48px;

  /* --- espacement (charte §4) --------------------------------------------- */
  /* ⚠️ **Ajouté le 2026-08-05**, pour le liseré du logo dans le menu. Le plus petit écart de
     l'échelle : réservé aux **filets** — un liseré, un décalage optique — jamais à une mise en
     page. Un espacement de 2 px entre deux blocs ne se voit pas ; il ne fait qu'échapper à la
     grille et rendre l'ensemble irrégulier sans qu'on sache pourquoi. */
  --e-2: 2px;
  --e-4: 4px;
  --e-8: 8px;
  --e-12: 12px;
  --e-16: 16px;
  --e-20: 20px;
  --e-24: 24px;
  --e-32: 32px;
  --e-40: 40px;
  --e-56: 56px;
  --e-72: 72px;

  /* --- rayons ------------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 11px; /* boutons, champs */
  --r-lg: 16px; /* cartes */
  --r-xl: 20px;
  --r-pilule: 999px;

  /* --- ombres (discrètes) ------------------------------------------------- */
  --ombre-1: 0 1px 2px rgba(16, 24, 40, 0.04);
  --ombre-carte: 0 18px 40px -28px rgba(16, 24, 40, 0.35);

  /* --- largeurs de conteneur (charte §4) ---------------------------------- */
  --l-vitrine: 1160px;
  --l-formulaire: 620px;
  --l-lecture: 760px;
  /* Largeur du menu latéral du back-office. ⚠️ **Un token, et non deux valeurs recopiées** : la
     grille du shell ET le centrage des fenêtres modales s'en servent — une fenêtre centrée sur la
     zone de contenu doit connaître la largeur de ce qui la précède. */
  --l-menu-bo: 238px;

  /* Bornes du logo de cabinet dans le menu. ⚠️ **Deux bornes, pas une** : un logo est fourni tel
     quel par le cabinet, en carré, en bannière ou en timbre-poste. Ne borner que la hauteur
     laisserait une bannière déborder la colonne ; ne borner que la largeur laisserait un logo
     vertical repousser tout le menu vers le bas. */
  /* ⚠️ **Deux hauteurs, pas une** [réglé à l'écran le 2026-08-05]. Un logo *carré* vient buter sur
     la borne de hauteur et occupe alors toute la largeur qu'elle lui donne ; une *bannière*, elle,
     est bloquée par la largeur bien avant. Même règle, effet visuel opposé selon la forme de
     l'image — c'est donc la hauteur qui décide du cas gênant, et elle diffère selon le format.

     Sur **mobile**, le logo occupe une rangée entière au-dessus du nom : 40 px suffisent, au-delà
     il repousse le contenu vers le bas sur un écran qui en manque. Sur **desktop**, il partage une
     colonne de 238 px avec le nom du cabinet, que la charte veut lu en premier (macro §2,
     anti-confusion) : 60 px le laissent identifiable sans lui passer devant. */
  --l-logo-h: 40px;
  --l-logo-h-large: 60px;
  --l-logo-l: 220px;

  /* Hauteur de l'aperçu d'une signature. Plus généreuse que le logo : il faut pouvoir juger la
     netteté du tracé et le cadrage du scan avant de l'apposer sur un document qui engage. */
  --l-signature-h: 140px;

  /* --- cibles tactiles (accessibilité, charte §8) ------------------------- */
  --cible-min: 44px;
}