/* ============================================================================
   tokens.css - Design system « File de décisions »
   Créé de zéro pour ce front. Aucune ressource externe, aucun appel réseau.

   RÈGLE, énoncée de façon vérifiable :
     · COULEUR - aucune valeur de couleur ne s'écrit hors de ce fichier.
       Seule exception documentée : les 3 littéraux d'accent de la
       configuration cliente (spec §7.6), injectés en variables au démarrage.
     · ÉCHELLE - toute valeur d'échelle (espacement, rayon, typographie,
       cible tactile, gabarit de chrome, taille d'icône) est un token.
   Restent écrites en dur, et seulement elles :
     · les filets (1 à 3 px), le calage fin d'une pastille sur son icône
       (son padding de 5 px, ses décalages négatifs) et les marges négatives
       de compensation optique - des ajustements, pas des valeurs d'échelle ;
       les tokeniser n'aiderait personne ;
     · les points de rupture des `@media`, que CSS interdit d'exprimer
       avec `var()`.
   Vérification : `grep -nE '[^-a-z](-?[0-9]+)px' css/*.css` hors ce fichier
   ne doit plus renvoyer que ces deux familles, et les surcharges de token
   des media queries (`:root { --gouttiere: 12px }`).
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Surfaces & encres ------------------------------------------------- */
  --papier:        #F4F3EF;   /* fond de page                                */
  --surface:       #FFFFFF;   /* carte, barre, feuille                       */
  --surface-creuse:#F3F2EE;   /* encart en creux (ligne « pourquoi »)        */
  --surface-appui: #EAE8E2;   /* survol neutre, puce, bouton secondaire      */
  --encre:         #16171A;   /* texte principal        18.4:1 / surface     */
  --encre-douce:   #5C5F66;   /* texte secondaire        6.4:1 / surface     */
  --ligne:         #DCDAD3;   /* filet 1px                                   */
  --ligne-forte:   #B9B5AA;   /* filet marqué, rule de l'encart pourquoi     */

  /* --- Accent client (les 3 seuls usages : bouton primaire,
         indicateur d'onglet actif, logo). Surchargé par CONFIG.client. ----- */
  --accent:        #17439B;   /* 9.0:1 avec --accent-encre                   */
  --accent-appui:  #10357C;   /* état pressé / survol                        */
  --accent-encre:  #FFFFFF;   /* texte posé sur l'accent                     */
  --accent-voile:  #E4EDFA;   /* voile très léger : fond d'onglet actif      */

  /* --- Famille sémantique : paires fond / texte, toutes >= 6:1 ----------- */
  --succes-fond:   #E3F1E6;  --succes-encre:  #14612F;   /* 6.5:1 */
  --alerte-fond:   #FBEEDC;  --alerte-encre:  #7A4A06;   /* 6.5:1 */
  --danger-fond:   #FBE6E4;  --danger-encre:  #8E1D14;   /* 7.5:1 */
  --info-fond:     #E4EDFA;  --info-encre:    #1B4A8C;   /* 7.4:1 */
  --neutre-fond:   #EAE8E2;  --neutre-encre:  #4A4C51;   /* 7.0:1 */

  /* --- Focus (non-navigateur, >= 2px) ------------------------------------ */
  --focus:         #0B0C0E;
  --focus-largeur: 2px;
  --focus-ecart:   2px;

  /* --- Typographie : stack système, 3 tailles SEULEMENT ------------------ */
  --police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --police-chiffres: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-titre: 16px;  --lh-titre: 1.3;   /* titre de carte, titre d'écran     */
  --fs-corps: 14px;  --lh-corps: 1.45;  /* corps, boutons, saisie            */
  --fs-meta:  13px;  --lh-meta:  1.4;   /* méta, puces, ligne « pourquoi »   */
  /* plancher absolu : 13px sur mobile ; jamais de 4e taille dans le TEXTE. */

  /* Taille d'AFFICHAGE, hors échelle de texte : la page d'accueil du chatbot
     est une adresse, pas du texte courant. Un seul usage dans tout le
     produit (`.ecran-chat__salut`) - si un deuxième apparaît, c'est que
     l'échelle de texte est en train de dériver.                            */
  --fs-accueil: 26px;  --lh-accueil: 1.2;

  --gras-fin: 300;     /* réservé à la taille d'affichage ci-dessus : à 34px,
                          le trait fin du logo ATRIUM, pas un titre gras     */
  --gras-titre: 600;
  --gras-appui: 550;   /* dégradé automatique vers 600 si non supporté      */
  --gras-corps: 400;

  /* --- Espacement : base 4 --------------------------------------------- */
  --sp-serre: 6px;  /* demi-cran : densité interne de carte, et point d'état */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;

  --gouttiere:  16px;  /* marge horizontale de la colonne de cartes         */
  --carte-pad:  14px;  /* padding interne de carte                          */
  --carte-gap:  12px;  /* gap vertical entre deux cartes                    */

  /* --- Rayons : 3 valeurs + pill ---------------------------------------- */
  --r-1:  6px;    /* puces, encarts, champs                                 */
  --r-2: 10px;    /* cartes, boutons                                        */
  --r-3: 16px;    /* feuille basse, dialogue                                */
  --r-pill: 999px;

  /* --- Voiles (seules valeurs à canal alpha du système) ------------------ */
  --voile:        rgba(22, 23, 26, .38);   /* fond du dialogue modal          */
  --voile-clair:  rgba(255, 255, 255, .14);/* survol posé sur --encre         */

  /* --- Élévation (deux niveaux, discrets) ------------------------------- */
  --ombre-1: 0 1px 2px rgba(22, 23, 26, .06);
  --ombre-2: 0 -6px 24px rgba(22, 23, 26, .16);

  /* --- Cibles tactiles --------------------------------------------------- */
  --cible: 44px;

  /* --- Gabarits d'objets récurrents -------------------------------------- */
  --icone:        20px;  /* icône courante                                   */
  --icone-nav:    22px;  /* icône de la barre de navigation                  */
  --icone-appui:  24px;  /* icône d'un objet d'appui (logo, avatar)          */
  --pastille:     18px;  /* pastille numérique d'onglet, et puce d'état      */
  --avatar:       32px;  /* jeton d'initiales dans la barre haute            */
  --indicateur:   28px;  /* trait d'onglet actif                             */
  --marque:       40px;  /* pastille ronde d'un état vide                    */
  --poignee:      36px;  /* poignée de la feuille basse                      */
  --fiche-large: 420px;  /* colonne « fiche » en desktop                     */
  --champ-label: 108px;  /* colonne des libellés de champ, dans une carte    */
  --reglage-label: 240px; /* colonne des libellés de réglage Pulse           */
  --secondaire-h: 64px;  /* action secondaire empilée (icône au-dessus)      */
  --feuille-max: 480px;  /* largeur max de la feuille basse en desktop       */
  --toast-max:   420px;  /* largeur max d'un toast                           */

  /* --- Chrome ------------------------------------------------------------ */
  --barre-haute: 56px;
  --barre-basse: 56px;
  --nav-large: 232px;   /* menu vertical desktop                            */
  --colonne-max: 640px; /* largeur confortable de la file en desktop        */

  /* --- Mouvement --------------------------------------------------------- */
  --duree-1: 120ms;
  --duree-2: 180ms;
  --duree-3: 260ms;
  --courbe: cubic-bezier(.2, .7, .3, 1);
}

/* Seule taille qui respire avec la fenêtre : l'accueil du chatbot occupe une
   page entière, il tiendrait trop petit sur un écran large. */
@media (min-width: 840px) {
  :root { --fs-accueil: 34px; }
}

/* Le thème sombre du système ne doit avoir aucun effet : la maquette est
   volontairement mono-thème (contrastes recettés une seule fois). */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}