/*
 * Game of AI Consultant, piste 2 — tokens UI (GOA-34)
 * Source : Maquette simulation.html (même noms de variables, mêmes valeurs, sauf les 5 corrections AA signalées « AA »).
 * Destination prévue : apps/web/src/ui/tokens.css (copie par l'Expert Dev, sans modification ; toute évolution passe par l'UX).
 * Charte Meritis : bleu #005B6A, doré #E0B55F, graphite #3B3B3B, gris clair #F3F3F3, crème #FBF9F2 (texte sur fond foncé, jamais en fond).
 * Design plat (aucune ombre sauf toast et surimpression), onde en quart de cercle = border-radius: var(--r-wave) sur un seul coin.
 * Thème : clair par défaut ; sombre via prefers-color-scheme, forçable par data-theme="light|dark" sur <html>.
 * Règle d'usage : les fonds teintés (--tint*, --*-tint) ne se posent que sur --surface, jamais sur --bg (contraste vérifié sur --surface).
 */

/* Police : pas d Aptos sur le web (licence) ; police libre OFL à choisir, en attendant Segoe UI et la police système. */

:root{
  /* ---- Couleurs : surfaces et texte ---- */
  --bg:#F3F3F3;            /* fond de page (gris clair charte) */
  --surface:#FFFFFF;       /* cartes, modales, champs */
  --ink:#005B6A;           /* titres, valeurs, boutons primaires (bleu charte) */
  --body:#3B3B3B;          /* texte courant (graphite charte) */
  --muted:#5E6A6C;         /* texte secondaire, bordure des contrôles */
  --rule:#D9D9D9;          /* filets et bordures décoratives (non porteuses de sens) */
  --sub:#86692C;           /* AA : doré foncé pour texte (eyebrows, coûts en €). Maquette initiale #9A7A38 = 4,0:1, insuffisant */

  /* ---- Couleurs : bandeau et accents ---- */
  --band:#005B6A;          /* barre d'application, carte de rôle, en-tête de page équipe */
  --band-deep:#0B3941;     /* toast */
  --band-ink:#FBF9F2;      /* texte sur bandeau (crème charte, jamais en fond) */
  --gold:#E0B55F;          /* accent, bouton d'action principal du jeu, onde, sélection */
  --gold-ink:#3B3B3B;      /* texte sur doré */
  --teal:#6CA2AA;          /* remplissage des jauges et barres de progression (décoratif : la valeur est toujours écrite) */

  /* ---- Teintes (sur --surface uniquement) ---- */
  --tint:rgb(0 91 106 / .07);
  --tint-gold:rgb(224 181 95 / .18);
  --tint-teal:rgb(108 162 170 / .18);

  /* ---- États ---- */
  --crit:#A8412A;          /* AA : erreur, expiré, danger, impact défavorable. Maquette initiale #B5482F */
  --crit-tint:rgb(168 65 42 / .1);
  --ok:#357052;            /* AA : succès, connecté, impact favorable. Maquette initiale #3F7F5F */
  --ok-tint:rgb(53 112 82 / .12);
  --warn:#86692C;          /* AA : avertissement (texte) */
  --warn-tint:rgb(224 181 95 / .22);
  --gel:repeating-linear-gradient(135deg,transparent 0 6px,rgb(168 65 42 / .09) 6px 8px); /* hachures du gel de décembre */

  /* ---- Focus et contrôles (AA, critère 1.4.11 et 2.4.7) ---- */
  --focus:#005B6A;         /* AA : anneau de focus sur fond clair (le doré sur blanc = 1,9:1, insuffisant) */
  --focus-on-band:#E0B55F; /* anneau de focus dans la barre bleue et sur la carte de rôle */
  --focus-ring:3px;
  --focus-offset:2px;
  --control-border:#5E6A6C;/* AA : bordure des cases à cocher et champs (le teal = 2,8:1, insuffisant) */

  /* ---- Typographie ---- */
  --font:"Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --fs-xs:11.5px;   /* labels capitales (.label), th */
  --fs-sm:13px;     /* .small, méta */
  --fs-base:15px;   /* corps */
  --fs-md:16px;     /* h3 */
  --fs-lg:20px;     /* h2, chrono d'incident */
  --fs-xl:24px;     /* valeur de jauge, chrono de phase */
  --fs-2xl:30px;    /* semaine de projet, h1 max */
  --fs-3xl:38px;    /* grand chiffre (attractivité) */
  --fs-h1:clamp(22px,3vw,30px);
  --fw-regular:400; --fw-semibold:600; --fw-bold:700; --fw-black:900;
  --lh-tight:1.2; --lh-base:1.5;
  --ls-label:.08em;

  /* ---- Rayons ---- */
  --r:12px;                /* cartes, modales */
  --r-sm:4px;              /* boutons, champs, chips */
  --r-pill:999px;          /* pastilles, barres */
  --r-wave:100% 0 0 0;     /* onde Meritis en quart de cercle (un seul coin arrondi à 100 %) */

  /* ---- Espacements (base 4) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --gutter:16px;           /* marge latérale minimale, téléphone compris */
  --container:1240px;

  /* ---- Mouvement ---- */
  --dur-fast:.2s; --dur-base:.4s; --dur-slow:.6s;
  --ease:cubic-bezier(.2,.7,.2,1);
  --reveal-hold:8s;        /* durée d'affichage de la révélation d'impact après une décision */
  --gauge-flash:4s;        /* durée du badge d'écart sur une jauge qui vient de bouger */

  /* ---- Élévation (seules exceptions au design plat) ---- */
  --shadow-toast:0 6px 20px rgb(11 57 65 / .2);
  --scrim:rgb(11 57 65 / .55);

  /* ---- Empilement ---- */
  --z-band:15; --z-safe:20; --z-overlay:30; --z-toast:40;

  /* ---- Points de rupture (à reprendre dans Tailwind screens) ---- */
  /* phone < 560 · sm 700 · md 860 · lg 960 · xl 1100 · cible portable 1366×768 */
}

@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#092C33; --surface:#0E3A42; --ink:#FBF9F2; --body:#D8E0E1; --muted:#9DB2B5; --rule:rgb(255 255 255 / .14);
  --sub:#E0B55F; --band:#0B3941; --band-deep:#06252B;
  --tint:rgb(255 255 255 / .05); --tint-gold:rgb(224 181 95 / .14); --tint-teal:rgb(108 162 170 / .2);
  --crit:#F09A84; --crit-tint:rgb(240 154 132 / .14); /* AA : maquette initiale #E58A72 = 4,0:1 sur sa teinte */
  --ok:#7CC39C; --ok-tint:rgb(124 195 156 / .14); --warn:#E0B55F; --warn-tint:rgb(224 181 95 / .18);
  --gel:repeating-linear-gradient(135deg,transparent 0 6px,rgb(240 154 132 / .14) 6px 8px);
  --focus:#E0B55F; --control-border:#9DB2B5;
  color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#092C33; --surface:#0E3A42; --ink:#FBF9F2; --body:#D8E0E1; --muted:#9DB2B5; --rule:rgb(255 255 255 / .14);
  --sub:#E0B55F; --band:#0B3941; --band-deep:#06252B;
  --tint:rgb(255 255 255 / .05); --tint-gold:rgb(224 181 95 / .14); --tint-teal:rgb(108 162 170 / .2);
  --crit:#F09A84; --crit-tint:rgb(240 154 132 / .14);
  --ok:#7CC39C; --ok-tint:rgb(124 195 156 / .14); --warn:#E0B55F; --warn-tint:rgb(224 181 95 / .18);
  --gel:repeating-linear-gradient(135deg,transparent 0 6px,rgb(240 154 132 / .14) 6px 8px);
  --focus:#E0B55F; --control-border:#9DB2B5;
  color-scheme:dark}

/* Base minimale liée aux tokens (le reste vit dans les composants) */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--body);font-family:var(--font);font-size:var(--fs-base);line-height:var(--lh-base);margin:0}
:focus-visible{outline:var(--focus-ring) solid var(--focus);outline-offset:var(--focus-offset)}
.on-band :focus-visible{outline-color:var(--focus-on-band)}
.num{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}