/* ══════════════════════════════════════════════════════════════════════
   BGFI Taskflow — jetons de la charte de design BGFI
   Source : CHARTE_DESIGN_BGFI.md, section 2.

   Cette feuille est la SEULE source des couleurs. Elle se charge avant
   « app.css », dont le bloc de jetons a été retiré : les variables
   historiques (--ink, --ground, --brand…) y sont réécrites en alias des
   jetons de la charte, ce qui habille d'un coup les écrans non réécrits.

   Le thème se pose sur <html data-theme="…"> par le serveur (pas de
   scintillement au chargement). Quatre thèmes obligatoires : ivoire
   (défaut), clair, marine, sombre.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Couleurs de marque : fixes, identiques dans les quatre thèmes ─────── */
:root {
  --marine: #0b2545;
  --marine-2: #071a33;
  --bleu-bgfi: #123c6b;
  /* Sauge : UNIQUE couleur de mise en valeur sur fond marine (nom court de
     l'application, entrée active, surtitres de la connexion). Aucun bleu
     ciel — #8fc0ef est proscrit par la charte. */
  --sauge: #97a083;
  --sauge-15: rgba(151, 160, 131, .15);
  --sauge-35: rgba(151, 160, 131, .35);
  --rouge: #b42318;

  /* Barre latérale : marine dans tous les thèmes (identité). */
  --sb-bg: #0b2545;
  --sb-bg-2: #071a33;
  --sb-text: #ffffff;
  --sb-muted: #9fb0c6;
  --sb-line: rgba(255, 255, 255, .08);

  --radius: 1rem;
  --radius-sm: .6rem;
}

/* ── Ivoire (défaut) ───────────────────────────────────────────────────── */
:root,
:root[data-theme="ivoire"] {
  color-scheme: light;
  --app-bg: #f5f1e8;
  --surface: #fffdf8;
  --surface-2: #faf7f0;
  --border: #e5ddcc;
  --text: #14243b;
  --muted: #64605a;
  --muted-2: #6d685f;
  --accent: #123c6b;
  --accent-hover: #0b2545;
  --accent-soft: #e7edf5;
  --ring: rgba(18, 60, 107, .28);
  --sur-accent: #ffffff;
  --thead-bg: #f1ebdf;
  --thead-text: #3d4a5c;
  --shadow: 0 1px 2px rgba(11, 37, 69, .06), 0 8px 24px rgba(11, 37, 69, .07);
  --p1: #0b2545; --p2: #123c6b; --p3: #4d7ba8; --p4: #a9c0d8;
}

/* ── Clair ─────────────────────────────────────────────────────────────── */
:root[data-theme="clair"] {
  color-scheme: light;
  --app-bg: #f3f5f8;
  --surface: #ffffff;
  --surface-2: #f7f9fc;
  --border: #dfe5ed;
  --text: #0f2138;
  --muted: #5a6779;
  --muted-2: #65707e;
  --accent: #123c6b;
  --accent-hover: #0b2545;
  --accent-soft: #e8eff7;
  --ring: rgba(18, 60, 107, .28);
  --sur-accent: #ffffff;
  --thead-bg: #f2f5f9;
  --thead-text: #3a4a60;
  --shadow: 0 1px 2px rgba(15, 33, 56, .06), 0 8px 24px rgba(15, 33, 56, .07);
  --p1: #0b2545; --p2: #123c6b; --p3: #4d7ba8; --p4: #a9c0d8;
}

/* ── Marine ────────────────────────────────────────────────────────────── */
:root[data-theme="marine"] {
  color-scheme: light;
  --app-bg: #e9eef5;
  --surface: #ffffff;
  --surface-2: #f3f6fa;
  --border: #d5deea;
  --text: #0b2545;
  --muted: #4f6080;
  --muted-2: #576885;
  --accent: #0b4f8a;
  --accent-hover: #0b2545;
  --accent-soft: #e2edf7;
  --ring: rgba(11, 79, 138, .3);
  --sur-accent: #ffffff;
  --thead-bg: #e3eaf3;
  --thead-text: #0b2545;
  --shadow: 0 1px 2px rgba(11, 37, 69, .07), 0 8px 24px rgba(11, 37, 69, .09);
  --p1: #0b2545; --p2: #0b4f8a; --p3: #4d8cc0; --p4: #a9c8e2;
}

/* ── Sombre ────────────────────────────────────────────────────────────── */
:root[data-theme="sombre"] {
  color-scheme: dark;
  --app-bg: #071428;
  --surface: #0e1f3a;
  --surface-2: #0b1a31;
  --border: #1d3254;
  --text: #e7edf5;
  --muted: #93a4bd;
  --muted-2: #7d8ea8;
  --accent: #5b8bc9;
  --accent-hover: #7ea5d8;
  --accent-soft: #14294a;
  --ring: rgba(91, 139, 201, .45);
  /* Sur un accent clair, le texte doit etre sombre : du blanc
     plafonnerait a 3,5:1. */
  --sur-accent: #071428;
  --thead-bg: #0b1a31;
  --thead-text: #a8b7cc;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
  --p1: #a9c8e2; --p2: #5b8bc9; --p3: #2f6098; --p4: #16365e;
  /* La barre latérale s'assombrit avec le thème, sans quitter le marine. */
  --sb-bg: #06111f;
  --sb-bg-2: #040b16;
}

/* ══════════════════════════════════════════════════════════════════════
   Alias historiques — ce qu'« app.css » et les 36 écrans existants
   emploient encore. Les réécrire ici suffit à les faire suivre la charte
   sans toucher une seule règle d'écran.

   Deux glissements de sens assumés :
     - `--accent` désignait le vert sauge ; c'est désormais le bleu de la
       charte. Ses 4 usages (barre de score, jour courant du calendrier,
       liseré de la tuile « taux ») sont décoratifs, et la charte réserve la
       sauge aux fonds marine.
     - `--accent-on-rail` devient la sauge exacte de la charte (#97a083),
       ce qui est précisément sa fonction.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  --ink: var(--text);
  --ink-2: var(--muted);
  --ink-3: var(--muted-2);
  --ground: var(--app-bg);
  --line: var(--border);
  --brand: var(--accent);
  --brand-strong: var(--accent-hover);
  --brand-soft: var(--accent-soft);
  --action: var(--accent);
  --action-hover: var(--accent-hover);
  --accent-on-rail: var(--sauge);
  --rail: var(--sb-bg);
  --rail-ink: var(--sb-text);
  --rail-ink-2: var(--sb-muted);
  --rail-line: var(--sb-line);
  --bleu-profond: var(--marine-2);
  --bleu-profond-2: var(--marine);
  --bleu-profond-3: #0f3059;
  --focus: 2px solid var(--accent);
}

/* États sémantiques : la couleur porte le sens, elle ne change pas de
   signification d'un thème à l'autre. Teintes des thèmes clairs tenues
   au-dessus de 4,5:1 sur leur fond « soft ». */
:root,
:root[data-theme="ivoire"],
:root[data-theme="clair"],
:root[data-theme="marine"] {
  --good: #0f7a0f; --good-soft: #e2f3e2;
  --warn: #8a5f07; --warn-soft: #fdf0d3;
  --crit: #b42318; --crit-soft: #f9e2e2;
}
:root[data-theme="sombre"] {
  --good: #4fc04f; --good-soft: #14301a;
  --warn: #e8b64c; --warn-soft: #33260b;
  --crit: #e87070; --crit-soft: #3a1717;
}