/* ══════════════════════════════════════════════════════════════════════════
   app-tokens.css — échelle typographique, rythme et durées des 3 surfaces
   client (history.html, account.html, transcription.html + ai-panel.css).

   POURQUOI CE FICHIER EXISTE (2026-08-27)
   ---------------------------------------
   Mesuré avant écriture, sur les surfaces réelles :
     history.html : 11 12 13 14 15 16 18 20 24 28  → 10 paliers
     ai-panel.css : 11 12 13 14 15 16 20           →  7 paliers
   Or ces deux surfaces se SUPERPOSENT (le panneau Atelier IA s'ouvre par-dessus
   l'historique) : le lecteur reçoit donc dix paliers, dont six se suivent de
   1 px en 1 px.

   Un écart de 1 px entre 11 et 12, ou entre 15 et 16, vaut ~8 %. C'est SOUS le
   seuil où l'œil lit une différence comme intentionnelle : chaque variation
   paraît accidentelle, aucune hiérarchie ne se construit, et le rendu est perçu
   comme non professionnel. Ce n'était pas un problème de goût mais de lisibilité
   de la hiérarchie — d'où une échelle à sauts francs, un rôle EXCLUSIF par
   palier, et surtout PAS de palier supplémentaire « juste pour ce cas-là ».

   RÈGLE D'USAGE
   -------------
   Toute déclaration font-size / padding / gap / margin / transition-duration des
   surfaces client doit consommer un token d'ici. Une valeur en dur est une
   régression : c'est très exactement comme ça que les 10 paliers sont apparus.

   Ce fichier est volontairement ADDITIF : il n'écrase aucune couleur et ne vide
   aucun :root existant. Les pages continuent donc de s'afficher correctement même
   si ce fichier ne se charge pas — la déduplication des palettes est un chantier
   distinct, avec un risque distinct, et ne doit pas être mélangée à celui-ci.
   Référence : DESIGN.md §3 (typographie) et §5 (rythme 8px).
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Typographie — 6 paliers de TEXTE, et rien d'autre ──────────────────
     Chaque palier a un rôle exclusif. Deux rôles voisins ne se distinguent
     jamais par 1 px : ils se distinguent par le palier, la graisse ou la
     couleur. --t-ui (13) et --t-meta (12) sont volontairement proches parce
     qu'ils ne se distinguent PAS par la taille mais par la nature : 13 est
     cliquable ou porteur, 12 est passif. */
  --t-hero: 28px;     /* H1 de page + LE chiffre héros de l'écran (un seul). 700 */
  --t-section: 20px;  /* Titre de section ou de panneau. 700 */
  --t-card: 18px;     /* Titre de carte + valeur de statistique. 600, chiffres 700 */
  --t-body: 15px;     /* Texte qui se lit en phrases + boutons >= 44px. 400 / 600 */
  --t-ui: 13px;       /* Contrôle compact 36px + texte subordonné d'une ligne. 500-600 */
  --t-meta: 12px;     /* Passif : dates, durées, labels capitales, badges. 400-500 / 700 */

  /* N'EST PAS un palier de hiérarchie : taille PLANCHER des champs de saisie.
     Sous 16px, iOS zoome automatiquement au focus (règle CLAUDE.md). Ne jamais
     l'employer pour du texte courant — c'est ce glissement qui avait introduit
     un 16 concurrent du 15. */
  --t-field: 16px;

  /* Interlignes appariés aux paliers. Un titre serré et un corps aéré ne
     s'obtiennent pas en changeant la taille mais l'interligne. */
  --lh-hero: 1.15;
  --lh-section: 1.3;
  --lh-card: 1.3;
  --lh-body: 1.6;
  --lh-ui: 1.5;
  --lh-meta: 1.4;

  /* Approches : resserrer les grandes tailles, jamais les petites. */
  --tr-hero: -0.03em;
  --tr-section: -0.02em;
  --tr-card: -0.01em;

  /* ── Rythme — multiples de 8px (DESIGN.md §5), 4px toléré en micro ─────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-12: 48px;

  /* ── Densité — 3 tokens, pas plus ───────────────────────────────────────
     Dérivés du rythme : une carte, une liste et un étage de page ne doivent
     pas pouvoir diverger d'une surface à l'autre. */
  --pad-card: var(--s-4) var(--s-5);
  --gap-list: var(--s-2);
  --gap-zone: var(--s-6);

  /* ── Durées — la distinction qui manquait ───────────────────────────────
     550ms est une durée de RÉVÉLATION : première peinture d'une page, ouverture
     d'un panneau. Employée sur une interaction répétée (changer d'onglet), elle
     fait paraître l'interface molle — c'est le cas aujourd'hui de la nav du
     compte, qui rejoue son animation d'entrée à chaque bascule de section.
     Une micro-interaction se mesure en dizaines de millisecondes. */
  --dur-press: 80ms;    /* retour de pression :active */
  --dur-ui: 200ms;      /* couleurs, survol, bascule d'état */
  --dur-pop: 180ms;     /* apparition d'un menu, d'un toast, d'un badge */
  --dur-enter: 550ms;   /* révélation initiale UNIQUEMENT */

  /* Retour de pression commun. Sur une surface tactile, l'absence de réponse
     sous le doigt est lue comme « le clic n'a pas marché » et provoque le
     double-clic — coûteux quand l'action débite un quota. */
  --press-scale: 0.97;
}

/* Sous 640px, seul le palier héros descend : réduire aussi les paliers
   intermédiaires écraserait la hiérarchie au moment où l'écran est le plus
   étroit, donc là où elle est le plus nécessaire. */
@media (max-width: 640px) {
  :root { --t-hero: 24px; }
}

/* Respect de la préférence système : les durées tombent à zéro, mais les
   tailles et le rythme ne bougent pas — l'accessibilité concerne le mouvement,
   pas la lisibilité. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms;
    --dur-ui: 0ms;
    --dur-pop: 0ms;
    --dur-enter: 0ms;
    --press-scale: 1;
  }
}