/*
 * Les jetons de l'identité Palmeraie — RECOPIÉS, pas importés, depuis
 * `apps/web/src/styles.css` (le bloc `:root` pour le clair, le bloc
 * `:root[data-theme='sombre']` pour le sombre). Copie du 26/09/2026 (S18, L0),
 * **resynchronisée le 03/10/2026** (refonte, lot 5) sur le sombre de la refonte : fonds
 * neutres à peine verdis sur quatre niveaux (`#121514` navigation, `#171a19` chrome,
 * `#1c201f` toile, `#232827` cartes), l'encre `#e8ecea`, les liens `#6cbb98`. Le clair n'a
 * pas bougé : seuls s'y ajoutent, à l'identique de la source, les jetons nés depuis
 * (tailles, rayons, espacements, les cinq rôles de surface — des alias en clair).
 *
 * Ce n'est pas une dépendance de build vers `apps/web` : le site est statique pur et ne
 * doit rien à l'application pour se construire (plan-s18.md §2.1). C'est un écart
 * assumé, désormais **gardé** : `scripts/jetons-vitrine.test.ts` compare, nom pour nom,
 * chaque bloc de ce fichier au bloc correspondant de l'application, et exige que
 * `docs/public/tokens.css` (le wiki) soit ce même fichier, octet pour octet. Une couleur
 * retouchée dans l'application sans être recopiée ici fait rougir `pnpm test`.
 *
 * Seule différence avec la source, et elle est délibérée : l'application choisit le
 * thème sombre par un attribut posé en JavaScript (`:root[data-theme='sombre']`,
 * `theme.ts`) ; le site n'a pas de script pour poser cet attribut et utilise donc la
 * préférence système du visiteur directement (`@media (prefers-color-scheme: dark)`).
 * Les VALEURS de chaque jeton sont identiques à la source ; seul le sélecteur qui les
 * active change.
 *
 * Les tokens propres à l'application (le ruban, les teintes de présence, les feux du
 * panneau, l'infobulle, l'acteur MCP du journal…) sont copiés tels quels même si le site
 * ne les consomme pas tous : la fidélité à la source prime, pour que la comparaison reste
 * simple, et pour que le wiki, qui reprend cette même chaîne, trouve le jeu complet.
 */

:root {
  /* Le socle — redéfini par le thème sombre de la vue embarquée. */
  --encre: #241f16;
  --discret: #6e6353;
  --trait: #e2d9c6;
  --fond: #faf6ee;
  --alerte: #a83226;

  /* L'accent : le vert de palme — focus, actif, badges, liens. */
  --accent: #0e6b52;
  /* L'encre accentuée : assez sombre pour être lue — en Palmeraie clair, l'accent lui-même. */
  --accent-encre: #0e6b52;

  /* Les surfaces : du plus proche du fond au plus marqué (sable, puis sauge côté accent). */
  --surface-douce: #f6f1e7;
  --surface-creuse: #f1ead9;
  --surface-attenuee: #f3eee3;
  --surface-neutre: #ece5d7;
  --surface-survol: #e9ece3;
  --surface-ligne-survol: #f2f1e9;
  --surface-page: #f2ece0;
  --surface-accent: #d7e1d7;
  --surface-accent-pale: #e2e8de;
  --surface-succes: #f2faf3;
  --surface-choisie: #ddeae7;
  --jauge: #caded9;
  /* Ce qui reste blanc parce qu'il recopie ou prolonge la toile du ruban. */
  --toile: #ffffff;

  /* Les traits, hors du --trait de base. */
  --trait-doux: #ded4c0;
  --trait-appuye: #b5a78c;
  --trait-voile: rgba(0, 0, 0, 0.15);
  --trait-voile-fort: rgba(0, 0, 0, 0.2);
  --separateur: #e7dfcf;
  --defilement-pouce: #b0a48c;

  /* Les ombres portées et le voile modal. */
  --ombre-douce: rgba(0, 0, 0, 0.08);
  --ombre: rgba(0, 0, 0, 0.12);
  --ombre-moyenne: rgba(0, 0, 0, 0.15);
  --ombre-forte: rgba(0, 0, 0, 0.18);
  --voile: rgba(0, 0, 0, 0.25);

  /* Les états : succès, attention, alerte, critique, signal (l'encre des triangles du cœur). */
  --succes: #2e9e44;
  --attention: #f5a623;
  --attention-fond: #fff8e1;
  --alerte-fond: #f4e8e0;
  --alerte-fond-appuye: #ebd3ca;
  --critique: #c62828;
  --critique-fond: #fbe9e7;
  --critique-sombre: #7a1010;
  --signal: #d0021b;
  --signal-resolu: #9a9a9a;

  /* Les feux tricolores du panneau (C05) : le même jeu que le SVG imprimé — le rouge du
     signal, l'orange de l'attention, le vert du succès. Un seul jeu, écran et document. */
  --feu-rouge: var(--signal);
  --feu-orange: var(--attention);
  --feu-vert: var(--succes);

  /* L'encre posée sur un aplat coloré (badges, avatars, infobulle) — dans les deux thèmes. */
  --encre-inversee: #ffffff;
  /* (S14, L4) L'encre des aplats vifs du thème (le badge sur l'accent, sur le signal) :
     blanche sur les verts et rouges profonds du clair, sombre sur les vifs du sombre —
     c'est elle qui tient le 4,5 quand l'accent s'éclaircit. Les avatars et l'infobulle
     gardent --encre-inversee : leurs aplats ne changent pas avec le thème. */
  --encre-sur-vif: #ffffff;
  /* L'encre qui reste sombre sur une bande de phase colorée, dans les deux thèmes. */
  --encre-sur-bande: #241f16;
  /* L'infobulle sombre, et l'acteur MCP du journal. */
  --infobulle-fond: #363026;
  --mcp: #6b3fa0;
  /* (Refonte, kanban) Le fond de la pastille agent (carte, en-tête de panneau) : --mcp posé en clair. */
  --mcp-fond: #efe8f7;

  /* (Refonte, sombre) Cinq rôles de surface que le clair confondait et que le sombre
     sépare : en clair, le sable fonce vers l'intérieur (la navigation et la colonne du
     kanban en `--surface-attenuee`, la carte en `--fond`, le segment coché en `--toile`) ;
     en sombre, ce qui s'élève s'éclaircit (la navigation `#121514` sous le chrome, la
     colonne puis la carte au-dessus). En clair ce sont des **alias** — la même valeur
     calculée qu'avant, au pixel près ; le bloc sombre leur donne leurs propres valeurs.
     L'encre de l'infobulle suit le même principe : blanche sur la bulle sombre du clair,
     sombre sur la bulle claire du sombre. */
  --surface-navigation: var(--surface-attenuee);
  --surface-colonne: var(--surface-attenuee);
  --surface-carte: var(--fond);
  --surface-segment: var(--toile);
  --infobulle-encre: var(--encre-inversee);

  /* (Refonte, fondations) Les tailles, rayons, espacements et ombres des composants
     communs (`composants/ui/`) — relevés sur les maquettes validées. Aucune couleur ici :
     les ombres se composent des tokens d'ombre ci-dessus, et suivent donc le thème. */
  --hauteur-bouton: 32px;
  --hauteur-bouton-compact: 28px;
  --hauteur-tactile: 44px;
  --hauteur-segmente: 28px;
  --taille-icone: 20px;
  --taille-icone-bouton: 18px;
  --taille-icone-texte: 16px;
  --rayon-petit: 5px;
  --rayon: 6px;
  --rayon-moyen: 8px;
  --rayon-grand: 10px;
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --police-bouton: 13px;
  --police-petite: 12px;
  --police-tactile: 14px;
  --anneau-focus: 2px;
  --ecart-focus: 2px;
  --ombre-flottante: 0 8px 24px var(--ombre), 0 1px 3px var(--ombre-douce);
  --ombre-segment: 0 1px 2px var(--ombre-douce);
  --duree-transition: 120ms;

  color-scheme: light;
}

/*
 * Le thème sombre — les mêmes noms de rôle, un second jeu de valeurs, et rien d'autre.
 * Dans l'application, c'est l'attribut `data-theme='sombre'` qui l'active ; ici, la
 * préférence système du visiteur (voir l'en-tête).
 */
@media (prefers-color-scheme: dark) {
  :root {
    --encre: #e8ecea;
    --discret: #a7b0ac;
    --trait: #3a4240;
    --fond: #171a19;
    --alerte: #f08a74;
    /* L'accent sombre : #55a081 (S14/L4 — ΔE 21,4 du vert de Claude, 34,7 de la présence
       verte) ; il reste l'anneau, l'aplat, le liseré. L'encre accentuée — liens, onglet et
       icône actifs sur un fond accentué — s'éclaircit en #6cbb98 : l'accent seul ne tient
       que 3,9:1 sur le neutre. */
    --accent: #55a081;
    --accent-encre: #6cbb98;
    --surface-douce: #191d1c;
    --surface-creuse: #272c2b;
    --surface-attenuee: #1c201f;
    --surface-neutre: #303634;
    --surface-survol: #272c2b;
    --surface-ligne-survol: #222726;
    --surface-page: #121514;
    --surface-accent: #1c3a2f;
    --surface-accent-pale: #1a2e27;
    /* Nettement plus verte que la sauge pâle d'« En cours » : « Fait » et « En cours » du
       kanban se distinguent au premier regard (le doute 3 de L3, mesuré par S14). */
    --surface-succes: #16341f;
    --surface-choisie: #1f3a31;
    --jauge: #2a4a3e;
    /* La toile recopie le ruban : la Palette sombre du cœur peint ce même #1c201f. */
    --toile: #1c201f;
    --trait-doux: #2a302e;
    --trait-appuye: #4f5855;
    --trait-voile: rgba(255, 255, 255, 0.18);
    --trait-voile-fort: rgba(255, 255, 255, 0.28);
    --separateur: #2a302e;
    --defilement-pouce: #4f5855;
    --ombre-douce: rgba(0, 0, 0, 0.35);
    --ombre: rgba(0, 0, 0, 0.45);
    --ombre-moyenne: rgba(0, 0, 0, 0.5);
    --ombre-forte: rgba(0, 0, 0, 0.6);
    --voile: rgba(0, 0, 0, 0.6);
    --succes: #4cb963;
    --attention-fond: #2f2c21;
    --alerte-fond: #33201a;
    --alerte-fond-appuye: #45291f;
    --critique: #ef6b6b;
    --critique-fond: #2f1714;
    --signal: #ef5a4e;
    --mcp: #b197d9;
    --mcp-fond: #2a2536;
    --encre-sur-vif: #0f1412;
    /* La bulle claire sur l'écran sombre (la maquette) : elle se détache du chrome au lieu
       de s'y fondre — c'était la reprise signalée par les fondations. */
    --infobulle-fond: #e8ecea;
    --infobulle-encre: #171a19;
    /* Les cinq rôles que le sombre sépare (voir `:root`). */
    --surface-navigation: #121514;
    --surface-colonne: #1c201f;
    --surface-carte: #232827;
    --surface-segment: #3a4240;
    /* La bande d'une phase : sa teinte stockée (une donnée, un pastel du clair) **dérivée**
       sur la toile — la même teinte, désaturée, à 19 % de luminosité —, l'encre claire du
       thème par-dessus. La couleur stockée ne change pas ; `contrastes-sombre.test.ts`
       relit ces deux paramètres et mesure l'encre sur chacune des six teintes. */
    --bande-saturation: 0.45;
    --bande-luminosite: 19%;
    color-scheme: dark;
  }
}