/* ============================================================
   THÈME — fichier unique chargé en premier par toutes les pages.
   Polices, couleurs (sombre / clair / accents), espacements.
   Règle : aucun autre fichier (CSS ou JS) ne contient de couleur
   en dur ; tout passe par ces variables. Le JS lit les couleurs
   avec UI.color(i) / getComputedStyle (canvas, image PNG).
   ============================================================ */

/* ---------- Polices (copiées dans vendor/fonts : fonctionne hors ligne ; choix dans Paramètres) ---------- */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(../../vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 500; font-display: swap; src: url(../../vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(../../vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(../../vendor/fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-display: swap; src: url(../../vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 400; font-display: swap; src: url(../../vendor/fonts/inter-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 500; font-display: swap; src: url(../../vendor/fonts/inter-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 600; font-display: swap; src: url(../../vendor/fonts/inter-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-weight: 700; font-display: swap; src: url(../../vendor/fonts/inter-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-display: swap; src: url(../../vendor/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-display: swap; src: url(../../vendor/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url(../../vendor/fonts/jetbrains-mono-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 600; font-display: swap; src: url(../../vendor/fonts/jetbrains-mono-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url(../../vendor/fonts/jetbrains-mono-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(../../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2) format("woff2"); }

:root {
  --bg: #16171b;
  --panel: #1d1f24;
  --raised: #25282e;
  --border: #2e3138;
  --text: #e4e5e9;
  --muted: #8d919c;
  --accent: #9b8afb;
  --hover: #272a31;
  --hover2: #31353d;
  --border-strong: #4a4f5a;
  --strong: #fff;
  --on-accent: #14102b;
  --accent-soft: #c9c0ff;
  --accent-bg: color-mix(in srgb, var(--accent) 22%, transparent);   /* cases « thème » du mandala, sélection */
  --danger: #e5484d;
  --danger-text: #ff8589;
  --on-danger: #fff;
  --danger-bg: color-mix(in srgb, var(--danger) 16%, transparent);
  /* réussite (case validée, objectif atteint, pause du pomodoro) : UNE seule couleur, = --c1 */
  --ok: var(--c1);
  --ok-text: #86efac;
  --on-ok: #08210f;
  --ok-bg: color-mix(in srgb, var(--ok) 20%, transparent);
  --warn: #fb923c;
  --overlay: rgba(0, 0, 0, .55);
  /* six couleurs de projet (pastilles, événements, barres, cases, nœuds) : une seule source */
  --c1: #4ade80; --c2: #fb923c; --c3: #f87171; --c4: #60a5fa; --c5: #c084fc; --c6: #facc15;
  /* pourrissement des nœuds (Graphe d'étude) : à jour · à réviser · en retard · pourri */
  --rot0: var(--c1); --rot1: var(--c6); --rot2: var(--c3); --rot3: #0a0a0c;
  --rot-gel: color-mix(in srgb, var(--g-node) 45%, var(--bg));   /* nœud gelé : gris pâle, contour pointillé */
  /* calendrier d'activité de l'accueil : dégradé de l'accent (même famille que le reste) */
  --heat0: var(--raised);
  --heat1: color-mix(in srgb, var(--accent) 28%, var(--raised));
  --heat2: color-mix(in srgb, var(--accent) 52%, var(--raised));
  --heat3: color-mix(in srgb, var(--accent) 76%, var(--raised));
  --heat4: var(--accent);
  --bar-past: color-mix(in srgb, var(--accent) 55%, var(--panel));   /* barres d'historique (Suivi) */
  --link: #4a4f5a;
  --g-edge: #4d525d;      /* couleurs du graphe (canvas) */
  --g-node: #8f94a0;
  --g-label: #b4b8c2;
  --shadow: 0 8px 28px rgba(0, 0, 0, .38);
  /* pastilles du choix d'accent (Paramètres) : la couleur que prendra --accent */
  --acc-violet: #9b8afb; --acc-bleu: #60a5fa; --acc-vert: #4ade80; --acc-orange: #fb923c; --acc-rose: #f472b6;

  --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --num: var(--mono);   /* police des chiffres (chrono, heures, statistiques) ; --font et --num se règlent dans Paramètres */
  --fs: 16px;        /* taille de texte de base */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;   /* échelle d'espacement */
  --gap: 16px;       /* marge entre composants */
  --radius: 10px;
  --side: 256px;     /* largeur de la barre latérale */
  --panel-w: 430px;  /* largeur du panneau de texte */
  --nav: 0px;        /* (plus de barre en haut) */
  --top: 68px;       /* sous la barre d'outils */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f5f5f2;
  --panel: #ffffff;
  --raised: #ecece8;
  --border: #dcdcd6;
  --text: #1f2126;
  --muted: #62666f;
  --accent: #6652e0;
  --hover: #eeeeea;
  --hover2: #e4e4df;
  --border-strong: #a9a9a2;
  --strong: #0e0f12;
  --on-accent: #ffffff;
  --accent-soft: #4a37c4;
  --accent-bg: color-mix(in srgb, var(--accent) 13%, transparent);
  --danger: #d93036;
  --danger-text: #b4232a;
  --ok-text: #126b36;
  --on-ok: #ffffff;
  --ok-bg: color-mix(in srgb, var(--ok) 15%, transparent);
  --overlay: rgba(20, 20, 30, .35);
  /* couleurs de projet assombries : lisibles (contraste ≥ 3:1) sur fond blanc */
  --c1: #1f9d55; --c2: #dd6b10; --c3: #dc3a3a; --c4: #2f6fe0; --c5: #9333ea; --c6: #b48a00;
  --rot3: #18181b;
  --heat0: #e6e6e2;
  --link: #c2c2bc;
  --g-edge: #b4b4ae;
  --g-node: #8b8b93;
  --g-label: #55555c;
  --shadow: 0 8px 28px rgba(30, 30, 40, .12);
  --acc-violet: #6652e0; --acc-bleu: #2f6fe0; --acc-vert: #1f9d55; --acc-orange: #e0701a; --acc-rose: #d6368a;
  color-scheme: light;
}

/* Couleur d'accent (Paramètres) */
:root[data-accent="bleu"] { --accent: #60a5fa; --accent-soft: #bfdbfe; --on-accent: #0b1a33; }
:root[data-accent="vert"] { --accent: #4ade80; --accent-soft: #bbf7d0; --on-accent: #06200f; }
:root[data-accent="orange"] { --accent: #fb923c; --accent-soft: #fed7aa; --on-accent: #2b1200; }
:root[data-accent="rose"] { --accent: #f472b6; --accent-soft: #fbcfe8; --on-accent: #310a1d; }
:root[data-theme="light"][data-accent="bleu"] { --accent: #2f6fe0; --accent-soft: #1d4fb8; --on-accent: #fff; }
:root[data-theme="light"][data-accent="vert"] { --accent: #1f9d55; --accent-soft: #15713c; --on-accent: #fff; }
:root[data-theme="light"][data-accent="orange"] { --accent: #e0701a; --accent-soft: #b2560f; --on-accent: #fff; }
:root[data-theme="light"][data-accent="rose"] { --accent: #d6368a; --accent-soft: #a8246a; --on-accent: #fff; }
:root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { transition: none !important; animation: none !important; }