/*
 * Design system S'kolo — tokens (ST-130/T1).
 * Source unique de vérité : docs/cadre/conception-console/systeme-conception.md §2 (palette)
 * et §3 (échelle typographique), validées par Carlin le 2026-09-23. Ne redéfinir aucune de ces
 * valeurs ailleurs — toute couleur/police d'un composant vient d'ici, jamais d'une valeur en dur.
 *
 * Emplacement délibérément hors de console/src/ : design-system/ n'appartient à aucun des
 * répertoires de publics distincts (ADR-003 — gateway/, console/, admin/, landing/), pour rester
 * consommable par admin/ et landing/ le jour où ils existeront (ni l'un ni l'autre n'a de code ni
 * de techno choisie à ce jour — landing/ n'est même pas engagée sur React, ST-070).
 */

:root {
  /* Couleurs de marque (systeme-conception.md §2) — deux seulement, jamais plus. */
  --skolo-primaire: #1D5BFF;
  --skolo-secondaire: #0E9F8E;
  /* Part réussie de l'anneau de progression, et rien d'autre (§4.5, ST-136/T15, décision A01) :
   * déclinaison de la secondaire reprise de charte-skolo.html:105 (--p-teal-ring), sur le modèle
   * des teintes lisibles - pas une troisième couleur de marque. */
  --skolo-secondaire-anneau: #1DD3BA;

  /* Couleurs d'état — un jeu de teintes par mot du glossaire, une teinte par rôle (texte, accent
   * lisible, fond, bordure éventuelle), jamais deux teintes pour le même rôle d'un même statut ;
   * l'échec a trois rôles de texte : corps d'encart (-fonce), accent (-lisible), bordure et
   * identité (-texte) (décision C-15). */
  --skolo-succes-texte: #0E9F7E;
  --skolo-succes-fond: #D9F5EC;
  /* Bordure de la carte de valeur unique, pleine sur la carte, en pointillés sur la zone valeur
   * (ST-136/T19, décision A09 point 6 ; ecrans-t4.html:123, :128). Teinte d'état, pas de marque. */
  --skolo-succes-bordure: #B9E8D5;
  --skolo-attente-texte: #B8790A;
  --skolo-attente-fond: #FAEDD2;
  --skolo-echec-texte: #D6483F;
  --skolo-echec-fond: #FBE6E4;

  /* Surfaces */
  --skolo-fond-page: #EEF1F7;
  --skolo-surface: #FFFFFF;
  --skolo-bordure: #E2E6F0;

  /* Texte */
  --skolo-encre: #1A1E2B;
  --skolo-encre-attenuee: #8991A6;

  /* Teintes de TEXTE lisibles (arbitrage #195, option b, Carlin 2026-09-25) : le rouge d'échec
   * et l'encre atténuée de la palette restaient sous le seuil WCAG AA de 4,5:1 pour du texte
   * (#D6483F sur #FBE6E4 : 3,61 ; #8991A6 sur blanc : 3,15). Fonds, bordures et identité
   * inchangés : seuls les textes prennent ces deux teintes plus foncées. Mesurés : #B3362D fait
   * 5,04 sur #FBE6E4 et 6,03 sur blanc ; #5F6780 fait 5,62 sur blanc, 4,96 sur #EEF1F7,
   * 4,87 sur #D9F5EC. */
  --skolo-echec-texte-lisible: #B3362D;
  /* Corps de texte de tout encart d'échec (décisions C-14, C-15 ; charte-skolo.html:160,
   * ecran-03-riche.html:75, ecrans-t3.html:102, ecran-nav-fix.html:55). Rôle distinct de l'accent
   * (titre, lien, action : -lisible) et de la bordure (-texte), donc pas un doublon au sens de
   * l'en-tête des couleurs d'état. Mesurés : 7,86 sur #FBE6E4, 9,41 sur blanc. */
  --skolo-echec-texte-fonce: #7A2D27;
  /* Même règle étendue aux badges et à la puce (Carlin, 2026-09-25, ST-130/T7) : #097058 fait
   * 5,25 sur #D9F5EC (au lieu de 2,90) ; #8A5A07 fait 5,11 sur #FAEDD2 (au lieu de 3,13). */
  --skolo-succes-texte-lisible: #097058;
  --skolo-attente-texte-lisible: #8A5A07;
  --skolo-encre-attenuee-lisible: #5F6780;

  /* Nav latérale — item actif (systeme-conception.md §4, structure de navigation). */
  --skolo-nav-actif-fond: #EEF2FF;
  --skolo-nav-actif-texte: #1D5BFF;

  /* Encart d'alerte, variante neutre (systeme-conception.md §4.7, ST-128/T4). */
  --skolo-neutre-fond: #EEF2FF;

  /* Espacement (ST-130/T3) — absent de la spécification, fixé ici par décision technique
   * mandatée (story ST-130 §2) : une petite échelle, pour que les composants ne portent plus de
   * px en dur. */
  --skolo-espace-1: 4px;
  --skolo-espace-2: 8px;
  --skolo-espace-3: 12px;
  --skolo-espace-4: 16px;

  /* Rayons (ST-136/T14, décision A05) : trois jetons repris des maquettes. Contrôles (boutons,
   * champs, encarts, liens de nav, coins hauts des onglets) 8 px (ecran-03:66, 76 ; ecran-06:84) ;
   * cartes 12 px (ecran-03:110, ecran-06:67) ; modales et cartes d'authentification 14 px
   * (ecran-06:80, ecrans-onboarding-1:28). */
  --skolo-rayon: 8px;
  --skolo-rayon-carte: 12px;
  --skolo-rayon-modale: 14px;

  /* Ombres (décision B05, #305) : deux jetons repris des maquettes, surface flottante
   * ecrans-t2.html:33, modale sur voile ecran-06-riche.html:81. */
  --skolo-ombre: 0 1px 2px rgba(0, 0, 0, 0.04), 0 16px 40px -22px rgba(0, 0, 0, 0.35);
  --skolo-ombre-modale: 0 24px 60px -20px rgba(0, 0, 0, 0.5);

  /* Typographie — un rôle par police, jamais interchangées (systeme-conception.md §3). */
  --skolo-police-titres: "Sora", -apple-system, "Segoe UI", Roboto, sans-serif;
  --skolo-police-corps: "Work Sans", -apple-system, "Segoe UI", Roboto, sans-serif;
  --skolo-police-chiffres: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

/*
 * Échelles et déclinaisons de la marque (ST-070/T1, cr-588, décision de Carlin du 2026-10-17).
 * AJOUTS SEULEMENT : aucune valeur ci-dessus n'est modifiée, console/ et admin/ ne sont pas touchées.
 * Points de départ : le bleu primaire #1D5BFF et le teal du logo #0E9F8E (docs/assets/logo.svg),
 * chacun placé au pas 600 ; encre #1A1E2B et blanc inchangés. Les pas 50-500 et 700-900 sont
 * générés en teinte constante (luminosité interpolée, saturation réduite côté clair).
 * Contrastes WCAG mesurés (texte normal : seuil AA 4,5:1 ; élément graphique : 3:1) :
 *   texte bleu-600 sur blanc 5,26, sur fond de page #EEF1F7 4,65, sur bleu-50 4,69 ;
 *   bleu-700 sur blanc 7,22, sur bleu-50 6,44 ; bleu-800 sur blanc 9,85 ; blanc sur bleu-600 5,26,
 *   sur bleu-700 7,22, sur bleu-800 9,85 ;
 *   teal-600 sur blanc 3,30 : graphique seulement (le point du logo), jamais du texte ;
 *   teal-700 sur blanc 4,71, mais 4,42 sur teal-50 : texte seulement sur blanc ;
 *   teal-800 sur blanc 6,86, sur teal-50 6,44 : le texte teal courant ;
 *   sombre (fond #0E1220, surface #161B2C) : bleu-300 8,68 / 7,96, bleu-200 sur surface 10,88,
 *   teal-400 9,64 / 8,84, encre #F5F6FA 17,27, encre atténuée #A9B1C9 8,72 / 8,00 ;
 *   sur les surfaces teintées sombres : bleu-300 sur #17254E 6,93, teal-400 sur #15303C 7,14,
 *   encre atténuée sur #17254E 6,96.
 */
:root {
  --skolo-bleu-50: #EEF2FB;
  --skolo-bleu-100: #DDE5F8;
  --skolo-bleu-200: #C0CEF2;
  --skolo-bleu-300: #9AB0EA;
  --skolo-bleu-400: #7899F0;
  --skolo-bleu-500: #4577FA;
  --skolo-bleu-600: #1D5BFF; /* = --skolo-primaire */
  --skolo-bleu-700: #0040E9;
  --skolo-bleu-800: #0032B6;
  --skolo-bleu-900: #002483;

  --skolo-teal-50: #EFFAF9;
  --skolo-teal-100: #DFF6F3;
  --skolo-teal-200: #C4EEE9;
  --skolo-teal-300: #A0E3DB;
  --skolo-teal-400: #29D0BD;
  --skolo-teal-500: #15BBA8;
  --skolo-teal-600: #0E9F8E; /* = --skolo-secondaire */
  --skolo-teal-700: #0B8274;
  --skolo-teal-800: #09665B;
  --skolo-teal-900: #064941;

  /* États : survol et actif d'un fond primaire (texte blanc), puis d'un lien ou texte teal. */
  --skolo-primaire-survol: var(--skolo-bleu-700);
  --skolo-primaire-actif: var(--skolo-bleu-800);
  --skolo-secondaire-survol: var(--skolo-teal-700);
  --skolo-secondaire-actif: var(--skolo-teal-800);
  --skolo-secondaire-texte-lisible: var(--skolo-teal-800);

  /* Surfaces teintées (clair). */
  --skolo-surface-teintee-primaire: var(--skolo-bleu-50);
  --skolo-surface-teintee-secondaire: var(--skolo-teal-50);

  /* Variantes sombres : valeurs à poser à la place des jetons clairs sous un thème sombre. */
  --skolo-sombre-fond-page: #0E1220;
  --skolo-sombre-surface: #161B2C;
  --skolo-sombre-surface-alt: #121829;
  --skolo-sombre-bordure: #2B3350;
  --skolo-sombre-encre: #F5F6FA;
  --skolo-sombre-encre-attenuee: #A9B1C9;
  --skolo-sombre-primaire-texte: var(--skolo-bleu-300);
  --skolo-sombre-primaire-texte-survol: var(--skolo-bleu-200);
  --skolo-sombre-secondaire-texte: var(--skolo-teal-400);
  --skolo-sombre-surface-teintee-primaire: #17254E;
  --skolo-sombre-surface-teintee-secondaire: #15303C;
}

/*
 * Jetons de la refonte des interfaces (ST-145/T2, DS1, cr-640 ; ticket parent #536, décision de Carlin
 * du 2026-10-21). AJOUTS SEULEMENT : aucune valeur ci-dessus n'est modifiée, aucun composant n'est
 * touché, la base de texte de `body` reste à 13 px. Ces jetons ne servent qu'aux feuilles et aux écrans
 * de la refonte (DS2 à DS4, C1 à C12) ; les pages non migrées ne les utilisent pas. Valeurs : prototype
 * validé et spécification de la refonte §2.
 *
 * Contrats testés, côté console/ et côté admin/ (tests design-system-jetons, design-system-contraste) :
 * une seule déclaration de --skolo-accent, aucune couleur d'accent en dur dans les autres feuilles, aucune
 * durée en dur dans une feuille, contraste de chaque couple de jetons (4,5:1 le texte, 3:1 une bordure de
 * contrôle, un focus ou un tracé) en clair et en sombre.
 */
:root {
  /*
   * L'ACCENT : UN SEUL JETON REMPLAÇABLE (palette bleue non tranchée, ticket #540). Pour changer la
   * couleur d'interface, ne modifier que la ligne --skolo-accent : le texte d'accent, les fonds teintés,
   * les états de survol et d'actif, les graphiques et les halos en dérivent. Aujourd'hui il vaut la
   * couleur primaire existante : aucune couleur nouvelle. Après un changement, rejouer
   * design-system-contraste.test.mjs : la formule du texte d'accent ne garantit pas 4,5:1 pour toute
   * couleur (une teinte claire échouerait), le test le dit. Les dérivés ne se redéfinissent nulle part
   * ailleurs. Les mélanges `color-mix` demandent un navigateur de 2023 ou plus (Safari 16.2).
   */
  --skolo-accent: var(--skolo-primaire);
  --skolo-sur-accent: #FFFFFF; /* texte sur aplat d'accent */
  --skolo-accent-texte: var(--skolo-accent);
  --skolo-accent-fond: color-mix(in srgb, var(--skolo-accent) 9%, var(--skolo-surface));
  --skolo-accent-survol: color-mix(in srgb, var(--skolo-accent) 86%, black);
  --skolo-accent-actif: color-mix(in srgb, var(--skolo-accent) 72%, black);
  --skolo-accent-halo: color-mix(in srgb, var(--skolo-accent) 22%, transparent);
  --skolo-graphique-accent: var(--skolo-accent);

  /* Espacement prolongé (l'échelle ci-dessus s'arrête à 16 px). */
  --skolo-espace-5: 24px;
  --skolo-espace-6: 32px;
  --skolo-espace-7: 48px;

  /* Échelle de texte en pixels entiers (rem, base 16 px du navigateur), pour une base d'écran de 14 px. */
  --skolo-texte-xs: 0.75rem; /* 12 */
  --skolo-texte-s: 0.8125rem; /* 13 */
  --skolo-texte-m: 0.875rem; /* 14 : corps */
  --skolo-texte-l: 1rem; /* 16 */
  --skolo-texte-xl: 1.25rem; /* 20 */
  --skolo-texte-titre: 1.5rem; /* 24 : titre de page */
  --skolo-texte-2xl: 1.75rem; /* 28 */
  --skolo-texte-solde: 3rem; /* 48 */

  /* Gabarits. */
  --skolo-rayon-pastille: 999px;
  --skolo-hauteur-controle: 36px;
  --skolo-cible-tactile: 44px;
  --skolo-nav-largeur: 248px;
  --skolo-contenu-max: 1080px;

  /* Mouvement : trois durées, une courbe, aucune animation décorative. Ramené à presque zéro par le bloc
   * prefers-reduced-motion plus bas ; aucune feuille ne porte de durée en dur (testé). */
  --skolo-duree-rapide: 120ms;
  --skolo-duree: 200ms;
  --skolo-duree-lente: 320ms;
  --skolo-courbe: cubic-bezier(0.2, 0.7, 0.2, 1);
  /* Brillance du squelette de chargement : seule animation en boucle (SPEC §6.5.5, 1,4 s). Jeton propre : DS2 la déduisait de
   * --skolo-duree-lente (x 4,375) faute de jeton (cr-643, écart 2) ; ST-145/T6 (C1) le pose. */
  --skolo-duree-squelette: 1400ms;

  /* Surfaces et filets (clair). --skolo-filet-controle est la bordure de tout contrôle (champ, puce, bouton
   * secondaire) : 3,15:1 sur blanc (WCAG 1.4.11), à n'employer que sur --skolo-surface et --skolo-surface-elevee (2,97:1 sur
   * --skolo-fond-lateral, 2,91:1 sur --skolo-survol : sous 3:1) ; --skolo-filet ne sépare que, il n'a pas de seuil. */
  --skolo-fond-lateral: #F7F8FB;
  --skolo-survol: #F4F6FA;
  --skolo-filet: #E8EBF2;
  --skolo-filet-controle: #8991A6;
  --skolo-surface-elevee: #FFFFFF;
  --skolo-ombre-menu: 0 0 0 1px #E8EBF2, 0 12px 28px -12px rgba(26, 30, 43, 0.22);
  --skolo-voile: rgba(26, 30, 43, 0.4);
  --skolo-squelette: #EDF0F6;
  --skolo-squelette-clair: #F7F8FC;
  --skolo-graphique-neutre: #8991A6;

  /* Pastilles de statut : texte, icône et libellé, jamais la couleur seule. Un texte et un fond par statut. */
  --skolo-pastille-succes-texte: #097058;
  --skolo-pastille-succes-fond: #E4F5EF;
  --skolo-pastille-attente-texte: #7A4F06;
  --skolo-pastille-attente-fond: #FBF0D9;
  --skolo-pastille-echec-texte: #B3362D;
  --skolo-pastille-echec-fond: #FCE9E7;
  --skolo-pastille-neutre-texte: #4A5168;
  --skolo-pastille-neutre-fond: #EDEFF5;
}

/*
 * Thème sombre. Il redéfinit des jetons existants (--skolo-surface, --skolo-encre, --skolo-encre-attenuee-lisible,
 * --skolo-bordure, --skolo-fond-page) et les jetons de la refonte ci-dessus, sous deux sélecteurs aux MÊMES valeurs :
 *   1. `:root[data-theme="dark"]` : choix explicite (bouton de thème de la console, ST-145/T6).
 *   2. `:root[data-refonte]:not([data-theme="light"])` sous `@media screen and (prefers-color-scheme: dark)` : réglage du système,
 *      pour les applications qui portent l'attribut `data-refonte` sur <html>. AUCUNE ne le porte aujourd'hui (décision déléguée du
 *      2026-10-21, cr-644 §4.8) : ce bloc est livré et DORMANT jusqu'au nettoyage (C12) ; console/index.html l'activerait. Un test lit les deux blocs et
 *      exige des déclarations identiques (design-system-jetons.test.mjs) : deux copies à garder égales.
 * POURQUOI `data-refonte` ET `screen`. tokens.css est partagé par console/, admin/ et landing/. admin/ n'a aucune page migrée : lui
 * donner le sombre du système le rendrait mi-clair, mi-sombre (plan de portage §6, C12) ; il n'adhère donc pas. landing/ redéfinit
 * ses propres jetons sombres (landing.css, chargé après ce fichier) et n'adhère pas non plus. `screen` : un tirage papier reste en
 * jetons clairs quel que soit le réglage du système ; le choix explicite, lui, est retiré à l'impression par le code
 * (lib/theme.ts, évènement beforeprint).
 * `--skolo-fond-page` est redéfini (fond latéral sombre) : sans cela, les pages que la refonte n'a pas migrées (connexion,
 * inscription, onboarding) poseraient un texte clair sur le fond de page clair #EEF1F7 (mesuré en DS1, cr-640 §1.3). Les fonds d'état
 * anciens (--skolo-succes-fond...) restent clairs, avec leur texte foncé : lisibles sur une page sombre, mais voyants (cr-644 §4.5).
 * landing/ pose aussi data-theme="dark" : son landing.css, chargé après ce fichier, redéfinit les mêmes propriétés et l'emporte
 * (mesuré, cr-640 §4). Les variantes `--skolo-sombre-*` ci-dessus restent celles de landing/. Contrastes testés pour tous les couples
 * (design-system-contraste).
 */
:root[data-theme="dark"] {
  color-scheme: dark;
  --skolo-fond-page: var(--skolo-fond-lateral);
  --skolo-surface: #0E1220;
  --skolo-encre: #F5F6FA;
  --skolo-encre-attenuee-lisible: #A9B1C9;
  --skolo-bordure: #232A42;
  --skolo-accent-texte: color-mix(in srgb, var(--skolo-accent) 55%, white);
  --skolo-accent-fond: color-mix(in srgb, var(--skolo-accent) 24%, var(--skolo-surface));
  --skolo-fond-lateral: #0A0E19;
  --skolo-survol: #161B2C;
  --skolo-filet: #232A42;
  --skolo-filet-controle: #7C86A6;
  --skolo-surface-elevee: #161B2C;
  --skolo-ombre-menu: 0 0 0 1px #2B3350, 0 16px 32px -12px rgba(0, 0, 0, 0.6);
  --skolo-voile: rgba(4, 6, 12, 0.66);
  --skolo-squelette: #1B2136;
  --skolo-squelette-clair: #242B44;
  --skolo-graphique-neutre: #6B7596;
  --skolo-pastille-succes-texte: #6FE0BC;
  --skolo-pastille-succes-fond: #10302A;
  --skolo-pastille-attente-texte: #F2C877;
  --skolo-pastille-attente-fond: #3A2C0C;
  --skolo-pastille-echec-texte: #FFA8A0;
  --skolo-pastille-echec-fond: #3E1B1B;
  --skolo-pastille-neutre-texte: #C3C9DC;
  --skolo-pastille-neutre-fond: #1F2539;
}

@media screen and (prefers-color-scheme: dark) {
  :root[data-refonte]:not([data-theme="light"]) {
    color-scheme: dark;
    --skolo-fond-page: var(--skolo-fond-lateral);
    --skolo-surface: #0E1220;
    --skolo-encre: #F5F6FA;
    --skolo-encre-attenuee-lisible: #A9B1C9;
    --skolo-bordure: #232A42;
    --skolo-accent-texte: color-mix(in srgb, var(--skolo-accent) 55%, white);
    --skolo-accent-fond: color-mix(in srgb, var(--skolo-accent) 24%, var(--skolo-surface));
    --skolo-fond-lateral: #0A0E19;
    --skolo-survol: #161B2C;
    --skolo-filet: #232A42;
    --skolo-filet-controle: #7C86A6;
    --skolo-surface-elevee: #161B2C;
    --skolo-ombre-menu: 0 0 0 1px #2B3350, 0 16px 32px -12px rgba(0, 0, 0, 0.6);
    --skolo-voile: rgba(4, 6, 12, 0.66);
    --skolo-squelette: #1B2136;
    --skolo-squelette-clair: #242B44;
    --skolo-graphique-neutre: #6B7596;
    --skolo-pastille-succes-texte: #6FE0BC;
    --skolo-pastille-succes-fond: #10302A;
    --skolo-pastille-attente-texte: #F2C877;
    --skolo-pastille-attente-fond: #3A2C0C;
    --skolo-pastille-echec-texte: #FFA8A0;
    --skolo-pastille-echec-fond: #3E1B1B;
    --skolo-pastille-neutre-texte: #C3C9DC;
    --skolo-pastille-neutre-fond: #1F2539;
  }
}

/*
 * Mouvement réduit : sous la préférence du système, toute durée tombe à presque zéro, une animation ne
 * joue qu'une fois, sans délai, et le défilement n'est plus animé. Global, pour tout ce que la refonte
 * ajoute ; les règles propres à un composant (squelette fixe, transition de vue coupée) arrivent avec lui.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}