/* ============================================================================
   JETONS — copilote boulangerie
   ----------------------------------------------------------------------------
   Bloc 1  : les 16 variables de la collection Figma, valeurs résolues telles
             quelles (les cinq alias vers la bibliothèque externe compris).
   Bloc 2  : les valeurs présentes dans les maquettes sans être variabilisées
             en Figma. Elles le sont ici pour qu'un changement se fasse à un
             seul endroit. À reporter dans Figma quand tu voudras aligner.
   ========================================================================== */

:root {

  /* --- 1. Collection Figma ------------------------------------------------ */

  --primaire-20:   #fbf1e0;
  --primaire-60:   #835a2b;
  --primaire-80:   #442d1e;

  --secondaire-20: #f2f6dc;
  --secondaire-60: #9d9367;
  --secondaire-80: #5d542b;

  --danger-20:     #fbefef;
  --danger-60:     #93221c;
  --danger-80:     #6b1816;

  --success-20:    #e8f5f0;
  --success-60:    #1f7a5c;
  --success-80:    #09533a;

  --warning-20:    #fbf1e3;
  --warning-60:    #c4791f;
  --warning-80:    #8a591e;

  --couleur:       #ffffff;

  /* Styles de couleur (styles Figma, pas variables) */
  --primaire-vive:   #7a71e4;
  --secondaire-vive: #eae8fc;

  /* --- 2. Constaté dans les maquettes, pas encore variabilisé ------------- */

  /* Neutres */
  --fond:          #fcfffe;  /* fond des 6 écrans */
  --encre:         #111827;  /* titres Helvetica Neue */
  --encre-douce:   rgba(17, 24, 39, .49);  /* réplique de l'utilisateur, M2 */
  --gris-legende:  #8b8378;  /* légendes sous les titres */
  --gris-texte:    #6b6560;
  --gris-faible:   #979797;
  --gris-fantome:  #b8b6b7;  /* fin de phrase en cours de génération, M2 */
  --ligne:         #ede5d8;  /* filets et séparateurs */
  --ligne-chip:    #e6ded0;  /* contour des chips « ce que j'ai compris » */
  --home:          #bbb8b8;

  /* Information terrain — stationnement, distances, stock */
  --info:          #0070b5;
  --info-fond:     rgba(0, 112, 181, .10);
  --info-ligne:    rgba(0, 112, 181, .20);
  --trajet:        #ba680d;  /* pastille de temps sur la carte */

  /* Rayons */
  --r-chip:    100px;
  --r-icone:   21px;
  --r-module:  22px;
  --r-carte:   24px;
  --r-option:  26px;
  --r-carte-l: 28px;
  --r-pilule:  35px;
  --r-petit:   8px;

  /* Espacements */
  --e-2:  2px;  --e-3:  3px;  --e-4:  4px;  --e-5:  5px;  --e-6:  6px;
  --e-8:  8px;  --e-10: 10px; --e-12: 12px; --e-13: 13px; --e-14: 14px;
  --e-16: 16px; --e-18: 18px; --e-20: 20px; --e-24: 24px; --e-40: 40px;
  --e-47: 47px; --e-54: 54px;

  /* Typographie — deux familles, comme en Figma.
     Helvetica Neue porte les titres et les libellés d'interface,
     SF Pro (system-ui sur Mac, repli ailleurs) porte le contenu produit. */
  --police-ui:       'Helvetica Neue', Helvetica, Arial, sans-serif;
  --police-contenu:  -apple-system, BlinkMacSystemFont, 'SF Pro Text',
                     'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Styles de texte Figma */
  --heading-xl:  700 28px/34px var(--police-ui);   /* Heading/XL, -0.5px */
  --heading-m:   700 20px/28px var(--police-ui);   /* Heading/M,  -0.2px */
  --heading-s:   700 18px/24px var(--police-ui);   /* Heading/S */
  --title-m:     700 16px/24px var(--police-ui);   /* Title/M */
  --title-s:     700 14px/20px var(--police-ui);   /* Title/S */
  --body-l-med:  500 16px/24px var(--police-ui);   /* Body/L Medium */
  --body-m-med:  500 14px/20px var(--police-ui);   /* Body/M Medium */
  --body-s:      400 12px/16px var(--police-ui);   /* Body/S */
  --body-s-med:  500 12px/16px var(--police-ui);   /* Body/S Medium */

  /* Ombres */
  --ombre-mic:    0 4px 6px rgba(69, 46, 31, .22);
  --ombre-carte:  0 2px 10px rgba(69, 46, 31, .06);
  --ombre-flotte: 0 8px 28px rgba(69, 46, 31, .14);

  /* Gabarit iPhone des maquettes */
  --ecran-l: 402px;
  --ecran-h: 874px;

  /* Rythme d'animation */
  --duree-courte: .18s;
  --duree-ecran:  .34s;
  --duree-phase:  .45s;   /* le fond change plus lentement que l'interface */
  --courbe:       cubic-bezier(.22, .61, .36, 1);

  /* --- 3. Phases de conversation ----------------------------------------
     Une phase = une teinte. Au test utilisateur, « il m'écoute », « il
     réfléchit » et « il cherche une boulangerie » se ressemblaient trop :
     tout était violet, seul un petit libellé changeait. Chaque phase a
     maintenant sa couleur, reprise des jetons existants pour rester dans le
     système Figma, et elle ne sert QUE dans les dégradés de fond — halos et
     fond de l'appareil. Aucun composant ne change de couleur : les boutons,
     les cartes et le texte gardent la palette de la maquette.

       repos      crème neutre  — rien en cours
       ecoute     violet        — l'utilisateur a la parole
       traitement ambre         — je traite ce que tu viens de dire
       recherche  bleu          — appel terrain réel (Overpass / OSRM)
       parole     vert          — le copilote parle
       geoloc     violet clair  — demande de position en cours

     En triplets RVB, pour composer des rgb(... / alpha) dans les dégradés. */

  --phase-repos-rgb:      185 164 138;
  --phase-ecoute-rgb:     122 113 228;
  --phase-traitement-rgb: 196 121  31;
  --phase-recherche-rgb:    0 112 181;
  --phase-parole-rgb:      31 122  92;
  --phase-geoloc-rgb:     150 130 240;

  /* Phase courante — réécrite par [data-phase] sur .telephone */
  --phase-rgb: var(--phase-repos-rgb);
}

/* Halo décoratif : dans Figma c'est une ellipse floutée exportée en SVG.
   Reproduit en dégradé radial pour rester net à toutes les tailles et
   éviter une image externe. Il suit désormais la phase courante — c'est le
   support principal du code couleur décrit plus haut. */
:root {
  --halo: radial-gradient(circle at 50% 50%,
            rgb(var(--phase-rgb) / .24) 0%,
            rgb(var(--phase-rgb) / .11) 42%,
            rgb(var(--phase-rgb) / 0)  70%);
}

@media (prefers-reduced-motion: reduce) {
  :root { --duree-courte: 0s; --duree-ecran: 0s; --duree-phase: 0s; }
}