/* ============================================================================
   SOCLE POC — Tokens de design · neutres
   Deux thèmes (clair / sombre) pilotés par [data-theme] sur <html>.
   Aucune dépendance externe.
   Neutre : les jetons de couleur propres à un projet ne sont pas ici ; le projet
   les pose en surcharge de :root et de :root[data-theme="sombre"].
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Marque ------------------------------------------------------------- */
  --marque-900: #0b1e33;
  --marque-800: #0f2a47;
  --marque-700: #16385c;
  --marque-600: #1e4874;
  --marque-500: #2c5f92;
  --marque-300: #8fb0d2;
  --marque-100: #dbe6f3;

  /* Un seul accent : l'ancien jeu --accent-* est aliasé sur la couche v2 (--a),
     pour que les composants historiques suivent exactement la même couleur. */
  --accent-700: #1f4468;
  --accent-600: var(--a-600);
  --accent-500: var(--a);
  --accent-300: var(--a-200);
  --accent-100: var(--a-100);
  --sur-accent: #ffffff;

  /* --- Sémantique --------------------------------------------------------- */
  --ok-600: #1f7a52;
  --ok-500: #2e9e6b;
  /* statuts des tâches (palette B, 09/10/2026) : segments d'avancement des barres de jalon et pastilles de la légende du calendrier */
  --etat-fait: #3f9c73;
  --etat-cours: #4a7fc1;
  --etat-afaire: #c3cad4;
  --etat-bloque: #c1801f;
  --ok-100: #e2f4ec;
  --alerte-600: #a8551b;
  --alerte-500: #d97a2b;
  --alerte-100: #fceee0;
  --danger-600: #a32f2a;
  --danger-500: #c9413b;
  --danger-100: #fbe9e8;
  /* jour férié : teinte d'alerte choisie par l'utilisatrice (08/10/2026), plus claire que le rouge de danger.
     600 = texte de l'intitule (4,9:1 sur blanc), 500 = forme du losange. */
  --ferie-600: #d95751;
  --ferie-500: #ef9b96;
  --info-600: #2a5f9e;
  --info-500: #3a7cc7;
  --info-100: #e7f0fa;

  /* --- Surfaces et encres -------------------------------------------------- */
  --fond: #f2f4f7;
  --fond-2: #e8ecf1;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --surface-3: #eef2f6;
  --surface-inverse: var(--marque-800);
  --encre: #16212c;
  --encre-2: #3d4d5e;
  --encre-3: #6b7c8e;
  --encre-4: #97a5b4;
  --encre-inverse: #f4f8fc;
  --bord: #dbe2ea;
  --bord-fort: #c3cdd9;

  /* --- Typographie -------------------------------------------------------- */
  --police: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --police-titre: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --police-mono: "Cascadia Mono", "Consolas", ui-monospace, SFMono-Regular, monospace;

  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-30: 30px;
  --t-38: 38px;

  /* --- Espacements / formes ----------------------------------------------- */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;

  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-pilule: 999px;

  --ombre-1: 0 1px 2px rgba(16, 32, 48, .06);
  --ombre-2: 0 2px 8px rgba(16, 32, 48, .08);
  --ombre-3: 0 10px 28px rgba(12, 26, 42, .14);

  --focus: 0 0 0 3px rgba(44, 95, 146, .45);
  --transition: 140ms cubic-bezier(.4, 0, .2, 1);
}

/* ---------------------------------------------------------------- jetons v2 (ajout)
   Couche de présentation validée (maquette v2) : un seul accent, des neutres, des
   états. AJOUT SEUL : aucun jeton ci-dessus n'est retiré ni redéfini.
   Écarts de nom avec la maquette, pour ne pas casser l'existant :
     - la maquette nomme « --bord » son liseré d'ombre ; ici --bord reste la couleur
       de bordure (utilisée partout) et le liseré s'appelle --bord-ombre ;
     - ses rayons 4 / 6 / 8 / 10 px s'appellent --rv-1 à --rv-4 (--r-2 à --r-4 existent
       déjà, à 8 / 12 / 16 px) ;
     - l'échelle d'espacement --e-1 à --e-10 existe déjà et est identique.
   --titre et --mono sont les noms courts de --police-titre et --police-mono. */
:root {
  /* Neutres : toute la structure vit ici */
  --n-0: #ffffff; --n-25: #fcfcfd; --n-50: #f8f9fb; --n-100: #f1f3f6; --n-150: #e9ecf1;
  --n-200: #e0e4ea; --n-300: #c9cfd8; --n-400: #98a1af; --n-500: #6e7787; --n-600: #586070;
  --n-700: #3d4553; --n-800: #242c38; --n-900: #11161d;

  /* Un seul accent : actif, cliquable, sélectionné */
  --a: #2c5f92; --a-600: #24507c; --a-200: #cfdfef; --a-100: #eaf1f9;

  /* États : fait, en cours, bloqué, à produire. Jamais décoratifs. */
  --ok: #1c7a54; --ok-bg: #e8f4ee;
  --warn: #9a6414; --warn-bg: #fbf1e0;
  --stop: #a3342e; --stop-bg: #fbedec;
  --todo: #6e7787; --todo-bg: #f1f3f6;

  --titre: var(--police-titre);
  --mono: var(--police-mono);

  /* Bordure par ombre : plus fine qu'une bordure, ne touche pas la boîte */
  --bord-ombre: 0 0 0 1px rgba(16, 24, 40, .075);
  --ombre: 0 0 0 1px rgba(16, 24, 40, .075), 0 1px 2px -1px rgba(16, 24, 40, .08), 0 4px 12px -4px rgba(16, 24, 40, .06);
  --ombre-h: 0 0 0 1px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .10), 0 8px 20px -6px rgba(16, 24, 40, .08);
  --filet: rgba(16, 24, 40, .07);
  --rv-1: 4px; --rv-2: 6px; --rv-3: 8px; --rv-4: 10px;
}

/* ---------------------------------------------------------------- thème sombre */
:root[data-theme="sombre"] {
  color-scheme: dark;

  --marque-900: #dbe6f3;
  --marque-800: #c8d8ea;
  --marque-700: #a8bfd8;
  --marque-500: #7ea6cf;
  --marque-300: #35485d;
  --marque-100: #1b2a3a;

  --accent-700: #b3cde6;
  --accent-600: #9dbbdc;
  --accent-500: var(--a);
  --accent-300: #2a4560;
  --accent-100: #1b2a3a;
  --sur-accent: #0c1219;

  --ok-600: #56bd8d;
  --ok-500: #3fae7c;
  --etat-fait: #5bb48c;
  --etat-cours: #6a97d1;
  --etat-afaire: #cdd3dc;
  --etat-bloque: #d39a3f;
  --ok-100: #14301f;
  --alerte-600: #f0b070;
  --alerte-500: #e39a4c;
  --alerte-100: #352313;
  --danger-600: #ef8d88;
  --danger-500: #e0645e;
  --danger-100: #3a1c1b;
  /* jour férié en thème sombre : texte clair pour tenir le contraste, forme un cran plus bas que le texte */
  --ferie-600: #ef9b96;
  --ferie-500: #d95751;
  --info-600: #7fb0e6;
  --info-500: #5c95d4;
  --info-100: #16283c;

  --fond: #0c1219;
  --fond-2: #0f1720;
  --surface: #131c26;
  --surface-2: #18222e;
  --surface-3: #1e2a37;
  --surface-inverse: #0b121a;
  --encre: #e8eef5;
  --encre-2: #b8c6d4;
  --encre-3: #8b9aab;
  --encre-4: #6a7889;
  --encre-inverse: #0c1219;
  --bord: #263341;
  --bord-fort: #33445a;

  --ombre-1: none;
  --ombre-2: 0 1px 0 rgba(255, 255, 255, .03);
  --ombre-3: 0 12px 32px rgba(0, 0, 0, .5);
}

/* jetons v2 en thème sombre : les neutres s'inversent, l'accent et les états s'éclaircissent */
:root[data-theme="sombre"] {
  --n-0: #131c26; --n-25: #151f2a; --n-50: #18222e; --n-100: #1e2a37; --n-150: #263341;
  --n-200: #2d3b4b; --n-300: #3d4e62; --n-400: #6a7889; --n-500: #8b9aab; --n-600: #a3b1c0;
  --n-700: #b8c6d4; --n-800: #d5dfe9; --n-900: #e8eef5;
  --a: #7ea6cf; --a-600: #9dbbdc; --a-200: #2a4560; --a-100: #1b2a3a;
  --ok: #56bd8d; --ok-bg: #14301f;
  --warn: #f0b070; --warn-bg: #352313;
  --stop: #ef8d88; --stop-bg: #3a1c1b;
  --todo: #8b9aab; --todo-bg: #1e2a37;
  --bord-ombre: 0 0 0 1px rgba(255, 255, 255, .08);
  --ombre: 0 0 0 1px rgba(255, 255, 255, .08);
  --ombre-h: 0 0 0 1px rgba(255, 255, 255, .14);
  --filet: rgba(255, 255, 255, .08);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
}