/* ═══════════════════════════════════════════════════════════════════════════
 * theme.css — Les jetons visuels de MonitForge (refonte graphique, lot REFONTE-0).
 *
 * Référence : docs/superpowers/specs/2026-09-27-refonte-graphique-design.md §3.
 * Servi par GET /api/v1/panels/_shared/theme.css (liste blanche, jamais en cache).
 *
 * ⚠️ LA SEULE FEUILLE QUI ÉCRIT DES COULEURS. Toute autre feuille, tout composant,
 * toute page passe par ces variables. Le garde-fou test_socle_visuel.py échoue si
 * une couleur apparaît en dur ailleurs dans _shared.
 *
 * ⚠️ RÈGLE DES COULEURS. Le bleu est la MARQUE (logo, menu actif, boutons, liens,
 * courbes). Les autres couleurs ne servent QU'AUX ÉTATS : vert en marche, orange
 * veille, gris arrêtée, rouge panne. Jamais la couleur seule : toujours le mot.
 *
 * ⚠️ CONTRASTE AA (4,5:1) vérifié par calcul, en clair ET en sombre, pour chaque
 * paire texte/fond et état/fond (test_socle_visuel.py). Trois valeurs de départ
 * de la conception ont été assombries pour y arriver : texte secondaire, texte
 * discret, texte « arrêtée » (voir PROJECT_MEMORY §53).
 *
 * Clair par défaut. Sombre : <html data-theme="dark">, posé par MFUI.theme avant
 * le premier affichage.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  /* ── Fonds et surfaces ─────────────────────────────────────────────────── */
  --mf-fond: #F6F8FA;              /* fond d'application, menu latéral */
  --mf-surface: #FFFFFF;           /* contenu, cartes */
  --mf-surface-2: #F6F8FA;         /* surface secondaire (en-têtes, champs en lecture) */
  --mf-survol: #F0F3F6;            /* ligne ou lien survolé */
  --mf-bordure: #E3E8EE;
  --mf-bordure-douce: #F0F3F6;     /* lignes de tableau */
  --mf-bordure-champ: #C9D1DB;     /* contour d'un champ de saisie */

  /* ── Textes ────────────────────────────────────────────────────────────── */
  --mf-texte: #172033;
  --mf-texte-2: #5F6B7E;           /* secondaire (conception : #697386, 4,49:1 sur le fond) */
  --mf-texte-discret: #636E81;     /* discret (conception : #8792A2, 2,96:1) */

  /* ── Marque ────────────────────────────────────────────────────────────── */
  --mf-marque: #2563EB;
  --mf-marque-appuyee: #1D4ED8;    /* survol d'un bouton, texte du menu actif */
  --mf-marque-lavis: #EAF1FE;      /* fond du lien de menu actif, aire des courbes */
  --mf-marque-bord: #BFD3FB;       /* contour de l'encart d'appel */
  --mf-texte-sur-marque: #FFFFFF;
  --mf-focus: #2563EB;

  /* ── États (point / texte / lavis) ─────────────────────────────────────── */
  --mf-marche-point: #16A34A;
  --mf-marche-texte: #15803D;
  --mf-marche-lavis: #EAF7EE;
  --mf-veille-point: #F59E0B;
  --mf-veille-texte: #B45309;
  --mf-veille-lavis: #FFF7ED;
  --mf-veille-bord: #F5D9A8;
  --mf-arretee-point: #C4CAD3;
  --mf-arretee-texte: #5F6B7E;     /* conception : #697386, 4,49:1 sur le fond */
  --mf-panne-point: #DC2626;
  --mf-panne-texte: #B42318;
  --mf-panne-lavis: #FDEBEC;
  --mf-panne-bord: #F5C2C0;
  --mf-danger: #DC2626;            /* bouton de suppression */
  --mf-danger-appuye: #B42318;
  --mf-texte-sur-danger: #FFFFFF;

  /* ── Blocs PLEINS d'un état, lus de loin (tableau mural, lot REFONTE-2) ── */
  /* Vert du bloc « en marche » plus soutenu que le point : du blanc sur le point
     #16A34A ne fait que 3,3:1. */
  --mf-plein-marche: #15803D;
  --mf-texte-sur-marche: #FFFFFF;
  --mf-plein-veille: #FEF3C7;      /* bordé de --mf-veille-point */
  --mf-texte-sur-veille: #78350F;
  --mf-plein-panne: #DC2626;
  --mf-texte-sur-panne: #FFFFFF;

  /* ── Graphiques : la marque, en trois intensités (pas d'autre teinte) ──── */
  --mf-serie-1: #2563EB;
  --mf-serie-2: #7FA6F3;
  --mf-serie-3: #C3D5FA;
  --mf-grille: #F0F3F6;

  /* ── Ombres : SEULEMENT les éléments flottants (fenêtre, menu, message) ── */
  --mf-ombre-flottant: 0 12px 32px rgba(23, 32, 51, 0.16), 0 2px 6px rgba(23, 32, 51, 0.08);
  --mf-voile: rgba(23, 32, 51, 0.38);

  /* ── Typographie ───────────────────────────────────────────────────────── */
  --mf-police: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mf-t-12: 12px;
  --mf-t-13: 13px;
  --mf-t-14: 14px;
  --mf-t-16: 16px;
  --mf-t-22: 22px;
  --mf-t-28: 28px;

  /* ── Rayons, espacements (multiples de 4 px), tailles ──────────────────── */
  --mf-rayon-controle: 6px;
  --mf-rayon-bloc: 9px;
  --mf-e-1: 4px;
  --mf-e-2: 8px;
  --mf-e-3: 12px;
  --mf-e-4: 16px;
  --mf-e-5: 20px;
  --mf-e-6: 24px;
  --mf-e-8: 32px;
  --mf-menu-large: 220px;
  --mf-menu-etroit: 64px;
  --mf-cible-terrain: 44px;        /* installateur : gants, soleil */
  --mf-duree: 160ms;
}

[data-theme="dark"] {
  color-scheme: dark;

  --mf-fond: #0E1116;
  --mf-surface: #131820;
  --mf-surface-2: #161B22;
  --mf-survol: #1A2029;
  --mf-bordure: #262C36;
  --mf-bordure-douce: #232934;
  --mf-bordure-champ: #353D4A;

  --mf-texte: #E6E8EC;
  --mf-texte-2: #98A0AD;           /* conception : #8B93A1 */
  --mf-texte-discret: #808999;     /* conception : #6B7483, 3,77:1 sur la surface */

  --mf-marque: #4C8DFF;
  --mf-marque-appuyee: #93C5FD;
  --mf-marque-lavis: #172554;
  --mf-marque-bord: #1E3A8A;
  --mf-texte-sur-marque: #0E1116;  /* du blanc sur ce bleu ne fait que 3,2:1 */
  --mf-focus: #93C5FD;

  --mf-marche-point: #4ADE80;
  --mf-marche-texte: #4ADE80;
  --mf-marche-lavis: #10261A;
  --mf-veille-point: #FBBF24;
  --mf-veille-texte: #FBBF24;
  --mf-veille-lavis: #2A1F0B;
  --mf-veille-bord: #4A3714;
  --mf-arretee-point: #5B6473;
  --mf-arretee-texte: #98A0AD;
  --mf-panne-point: #F87171;
  --mf-panne-texte: #FCA5A5;
  --mf-panne-lavis: #3B1219;
  --mf-panne-bord: #5C1D26;
  --mf-danger: #F87171;
  --mf-danger-appuye: #FCA5A5;
  --mf-texte-sur-danger: #0E1116;

  --mf-plein-marche: #22C55E;
  --mf-texte-sur-marche: #0E1116;
  --mf-plein-veille: #3B2A0B;
  --mf-texte-sur-veille: #FDE68A;
  --mf-plein-panne: #F87171;
  --mf-texte-sur-panne: #0E1116;

  --mf-serie-1: #4C8DFF;
  --mf-serie-2: #2F5FB8;
  --mf-serie-3: #1E3A6E;
  --mf-grille: #232934;

  --mf-ombre-flottant: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);
  --mf-voile: rgba(0, 0, 0, 0.55);
}

/* ── Remise à zéro légère ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--mf-fond);
  color: var(--mf-texte);
  font-family: var(--mf-police);
  font-size: var(--mf-t-14);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
table { border-collapse: collapse; }
a { color: var(--mf-marque); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }

/* Les chiffres s'alignent colonne sur colonne. */
.mf-chiffre, .mf-nombre, td, th { font-variant-numeric: tabular-nums; }

/* ── Focus visible au clavier, jamais à la souris ──────────────────────── */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--mf-focus);
  outline-offset: 2px;
  border-radius: var(--mf-rayon-controle);
}

/* Texte lu par les lecteurs d'écran, invisible à l'écran. */
.mf-lecteur {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Mouvement réduit : aucune animation ni transition ─────────────────── */
/* ⚠️ `none`, PAS la recette « durée 0,01 ms » : celle-ci fait transitionner
   TOUTES les propriétés de TOUS les éléments (transition-property vaut `all`
   par défaut), visibilité comprise — le tiroir restait masqué une image de
   trop et refusait le focus (constaté dans Edge, lot REFONTE-0). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}