/*
 * 1FOR42 : jetons de design (couleurs, typographies, tailles, espacements, rayons).
 *
 * SOURCE UNIQUE : design/tokens.css, à la racine du dépôt. Les copies servies par les applications
 * (intendant/design, vitrine/public/design, glpi/theme/assets/design) sont produites par
 * `node design/synchroniser.mjs`. Ne jamais les modifier à la main.
 *
 * Thèmes : clair par défaut, sombre si le système le demande, ou forcé par data-theme="clair" ou
 * data-theme="sombre" sur un ancêtre. Chaque couleur est écrite une seule fois, sous la forme
 * light-dark(clair, sombre) : le thème sombre n'est donc écrit qu'une fois.
 * Règles d'usage : design/README.md.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url("polices/ibm-plex-sans-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("polices/ibm-plex-mono-latin-400.woff2") format("woff2");
}
@font-face {
  font-family: "Martian Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("polices/martian-mono-latin-700.woff2") format("woff2");
}

:root {
  color-scheme: light dark;

  /* Surfaces. Clair (aluminium) : fond, panneau, plaque. Sombre (Worktop) : fond, panneau, élevé. */
  --fond: light-dark(#e4e5e2, #1b1e1d);
  --panneau: light-dark(#f2f3f0, #232726);
  --plaque: light-dark(#fafaf8, #2c312f);

  /* Encres : texte courant, valeur clé, secondaire, tertiaire (≥ 4,5:1 sur chaque surface). */
  --encre: light-dark(#141615, #c5ccc8);
  --encre-forte: light-dark(#141615, #ecefed);
  --encre-2: light-dark(#454a46, #a3aba6);
  --encre-3: light-dark(#5c615d, #949c97);

  /* Filets : séparation discrète ; contour de contrôle (≥ 3:1) ; filet d'encre des modules. */
  --filet: light-dark(#c9cbc6, #3a403d);
  --filet-fort: light-dark(#767b77, #747c77);
  --filet-titre: 2px solid var(--encre-forte);

  /* Action et sélection : pétrole-glacier, seule teinte de signal. */
  --action: light-dark(#0a6a80, #6fc9dc);
  --action-encre: light-dark(#fafaf8, #141615);
  --action-voile: color-mix(in srgb, var(--action) 14%, transparent);

  /* États (règle « ce qui est sain reste gris » ; toujours glyphe + mot + couleur) :
     ● --action « à vous » · ▲ --ambre « à surveiller » · ◆ --rouge « critique », seuil franchi ·
     ✓ --vert pendant 3 à 4 s, puis gris · — ⧗ ▨ et les zéros : --encre-3. Jamais d'aplat. */
  --ambre: light-dark(#8a5200, #f2a43a);
  --rouge: light-dark(#b3261e, #ff6656);
  --vert: light-dark(#276b39, #7acb8c);

  /* Séries de données : rampe de gris ; la série sélectionnée prend --action. */
  --seq-1: light-dark(#141615, #e2e6e3);
  --seq-2: light-dark(#454a46, #b9c0bc);
  --seq-3: light-dark(#5c615d, #949c97);
  --seq-4: light-dark(#767b77, #747c77);
  --seq-5: light-dark(#a9aca7, #535a56);

  /* Typographies : Plex Sans (texte et chiffres tabulaires), Plex Mono (codes, heures, axes),
     Martian Mono (logo seulement). */
  --police-texte: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --police-code: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  --police-logo: "Martian Mono", "IBM Plex Mono", ui-monospace, monospace;

  /* Tailles : 13 px au moins pour une donnée, jamais moins de 12 px. */
  --taille-min: 13px;
  --taille-1: 13px;
  --taille-2: 14px;
  --taille-3: 16px;
  --taille-4: 20px;
  --taille-5: 26px;
  --taille-6: 34px;

  /* Espacements (pas de 4 px) et rayons (modules ouverts : ni ombre ni dégradé). */
  --espace-1: 4px;
  --espace-2: 8px;
  --espace-3: 12px;
  --espace-4: 16px;
  --espace-5: 24px;
  --espace-6: 32px;
  --rayon-1: 4px;
  --rayon-2: 8px;

  /* Focus clavier visible (WCAG 2.4.7). */
  --focus: 2px solid var(--action);
}

[data-theme="clair"] {
  color-scheme: light;
}
[data-theme="sombre"] {
  color-scheme: dark;
}