/* Jetons du tableau de bord : couleurs, rayons, polices.
   Toute couleur vient d'ici ; les autres feuilles ne lisent que ces variables. */

:root {
  color-scheme: dark;

  /* Surfaces et texte */
  --fond: #060a12;
  --panneau: rgba(255, 255, 255, 0.035);
  --panneau-survol: rgba(255, 255, 255, 0.06);
  --voile: rgba(3, 6, 12, 0.62); /* derrière un panneau ouvert */
  --entete-tableau: rgba(255, 255, 255, 0.03);
  --bordure: rgba(255, 255, 255, 0.09);
  --texte: #e8edf4;
  --texte-doux: #94a3b8;
  --texte-pale: #7a879b;
  /* L'accent du tableau de bord : liens, onglet courant, titres, connexion. Le vert du thème ;
     aucun type de données ne le porte (les acides gras ont pris le fuchsia). */
  --lien: #2ef2a0;

  /* Sens d'un statut, le même partout : fait, à regarder, échec, sans suite. */
  --bon: #2ef2a0;
  --alerte: #ffb020;
  --critique: #ff3b5c;
  --neutre: #94a3b8;
  /* Pastille d'un nombre à traiter : l'ambre « à regarder », adouci. */
  --compteur-fond: #f5c26b;
  --compteur-texte: #2a1a02;

  /* Palette des types de données : la teinte d'une déclaration donnees/*.yaml. */
  --teinte-cyan: #3ad7ff;
  --teinte-ambre: #ffb020;
  --teinte-violet: #b197fc;
  --teinte-orange: #ff8a3d;
  --teinte-jaune: #ffd166;
  --teinte-bleu: #6b8cff;
  --teinte-rose: #ff6fae;
  --teinte-anis: #c5e84a;
  --teinte-fuchsia: #e879f9;

  /* Formes et polices */
  --rayon: 14px;
  --rayon-petit: 8px;
  --police: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Menlo, Consolas, monospace;
}

/* Une teinte se pose par une classe ; les composants ne lisent que --teinte. */
.teinte-cyan { --teinte: var(--teinte-cyan); }
.teinte-ambre { --teinte: var(--teinte-ambre); }
.teinte-violet { --teinte: var(--teinte-violet); }
.teinte-orange { --teinte: var(--teinte-orange); }
.teinte-jaune { --teinte: var(--teinte-jaune); }
.teinte-bleu { --teinte: var(--teinte-bleu); }
.teinte-rose { --teinte: var(--teinte-rose); }
.teinte-anis { --teinte: var(--teinte-anis); }
.teinte-fuchsia { --teinte: var(--teinte-fuchsia); }
.teinte-neutre { --teinte: var(--neutre); }