/**
 * MLsign, fondation « L'aréna et la lumière », validee le 2026-07-26.
 *
 * FICHIER GENERE, ne pas editer a la main.
 * Source : design/tokens.json du depot plateforme.
 * Regeneration : node scripts/sync-design.js
 *
 * Les lois :
 *   Le contenu possède le blanc : projecteur n'éclaire que les visuels diffusés et les chiffres de preuve.
 *   La hiérarchie est une luminance : le sommet de l'échelle appartient au contenu, jamais au chrome.
 *   La couleur est un événement : braise et halo en petites surfaces, jamais en aplats.
 *   Sombre par défaut partout où du contenu diffusé apparaît.
 *   Le papier inverse (rapport imprimé), la loi reste : la preuve tient les extrêmes du contraste.
 *   Lecture E de la palette (2026-07-26): halo_vif agit, braise ne parle que pour terminer (irreversible) et alerter, halo vit et mesure, cuir attend. Les zones gardent leurs teintes d'identite.
 *
 * On code contre les roles, jamais contre les jetons ni contre les hex.
 */

:root {
  /* --- Les douze jetons -------------------------------------------------- */
  --nuit: #0C1620;   /* Le fond. L'aréna éteinte, jamais du noir pur. */
  --fosse: #14232F;   /* Premier niveau de surface. Sections, panneaux. */
  --tribune: #1E3140;   /* Cartes et blocs, là où l'information s'assoit. */
  --gradins: #2E4250;   /* Survol, séparations internes, relief discret. */
  --acier: #3E515D;   /* Bordures, filets, chrome secondaire. */
  --brume: #8A99A0;   /* Texte secondaire, la foule floue. */
  --craie: #C9D3D9;   /* Texte courant et titres d'interface. Jamais blanc pur. */
  --projecteur: #FFFFFF;   /* RÉSERVÉ au contenu diffusé et aux chiffres de preuve. */
  --braise: #B54432;   /* L'humain et le vivant : session, alerte, incident. Pastilles, jamais d'aplats. */
  --cuir: #8A5A2E;   /* Chaleur secondaire : attente, badges, transitions. */
  --halo: #7A9EB8;   /* La donnée qui vit : battements, traces, relevés. */
  --halo-vif: #A8CCE0;   /* Point courant d'une série, éclat de donnée. */

  /* --- Les roles --------------------------------------------------------- */
  --fond: var(--nuit);
  --surface: var(--fosse);
  --carte: var(--tribune);
  --survol: var(--gradins);
  --bordure: var(--acier);
  --texte: var(--craie);
  --texte-secondaire: var(--brume);
  --contenu: var(--projecteur);
  --preuve: var(--projecteur);
  --live: var(--halo);
  --alerte: var(--braise);
  --attente: var(--cuir);
  --donnee: var(--halo);
  --donnee-vive: var(--halo-vif);
  --action: var(--halo-vif);
  --irreversible: var(--braise);

  /* Voiles poses sur les medias. Ce ne sont pas des degrades decoratifs :
     ils rendent le texte lisible par dessus une video, la loi 3 ne les vise pas.

     Ils sont volontairement courts. La loi 2 donne le sommet de la luminance
     au contenu : voiler un plan de rue sur toute sa hauteur eteint la seule
     chose qui eclaire la page, et c'est le chrome qui finit par dominer.
     Le voile protege le texte, il ne couvre pas l'image. */
  --voile-plat: rgba(12, 22, 32, 0.35);
  --voile-dense: rgba(12, 22, 32, 0.72);
  --voile-hero: linear-gradient(to top, rgba(12, 22, 32, 0.88) 0%, rgba(12, 22, 32, 0.62) 26%, rgba(12, 22, 32, 0.18) 54%, rgba(12, 22, 32, 0) 78%);
  --voile-carte: linear-gradient(to top, rgba(12, 22, 32, 0.96) 0%, rgba(12, 22, 32, 0.88) 22%, rgba(12, 22, 32, 0.35) 52%, rgba(12, 22, 32, 0) 80%);

  /* --- Forme -------------------------------------------------------------- */
  --radius: 0px;
  --hairline: 1px;

  /* --- Familles ----------------------------------------------------------- */
  --font-display: 'Switzer', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-texte: var(--font-display);
  --font-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --wght-texte: 400;
  --wght-titre: 700;
}

@font-face {
  font-family: 'Switzer';
  src: url('/assets/font/Switzer_400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Switzer';
  src: url('/assets/font/Switzer_700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Fragment Mono';
  src: url('/assets/font/FragmentMono.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}