/* ============================================================================
   tokens.css, la charte « Le relevé » traduite en variables.

   Le seul endroit du hub où une valeur graphique est écrite. Aucun outil ne
   redéfinit une couleur, une police ou un espacement en local : s'il en manque
   une, elle est ajoutée ici.

   Deux thèmes sur la même page, pilotés par html[data-theme]. Le sombre est le
   défaut : il tient sans attribut ni script. Poser le thème mémorisé AVANT le
   premier rendu, sinon éclair du thème opposé au chargement :

     <script>
       document.documentElement.dataset.theme =
         localStorage.getItem("hub:theme") || "sombre";
     </script>

   Voir charte/CHARTE-GRAPHIQUE.md pour les règles et le pourquoi.
   ========================================================================== */

@font-face { font-family:"Archivo"; src:url("polices/Archivo-var.woff2") format("woff2");
             font-weight:100 900; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("polices/IBMPlexMono-400.woff2") format("woff2");
             font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"IBM Plex Mono"; src:url("polices/IBMPlexMono-500.woff2") format("woff2");
             font-weight:500; font-style:normal; font-display:swap; }

/* ---------------------------------------------------------------------------
   Sombre (défaut) : l'encre claire sur le carbone, accent bleu riso.
   Le bleu plein sert aux aplats, sa version éclaircie aux traits fins et aux
   cotes, illisibles autrement en petit corps sur fond sombre.
   --------------------------------------------------------------------------- */

:root {
  color-scheme: dark;

  --acc:#2f3aa6;               /* aplats : option active, action qui fait avancer */
  --acc-hi:#8a93e6;            /* cotes, traits fins, survols */
  --acc-soft:#23274d;          /* fond de survol dans une liste, cible de dépôt */

  --desk:#161511;              /* la table, sous le quadrillage */
  --paper:#1e1d18;             /* les feuilles : panneaux, bandeaux, cartes */
  --ink:#e6e1d3;               /* l'encre du relevé : texte et cadres manipulables */
  --mut:#948d7b;               /* texte secondaire, étiquettes */
  --faint:#5f5a4c;             /* texte tertiaire, numéros au repos */
  --hair:#24231d;              /* quadrillage, séparateurs internes */
  --mid:#45423a;               /* cadres au repos */
  --field:#12110d;             /* fond des champs de saisie */
  --inv-mut:#6a655a;           /* texte secondaire posé sur un fond encre */

  --backdrop:rgba(0,0,0,.55);
  --shadow-soft:rgba(0,0,0,.38);
  --shadow-deep:rgba(0,0,0,.8);

  --font:"Archivo", "Helvetica Neue", sans-serif;
  --mono:"IBM Plex Mono", "SF Mono", monospace;
  --grid:linear-gradient(var(--hair) 1px, transparent 1px),
         linear-gradient(90deg, var(--hair) 1px, transparent 1px);

  /* Corps de base. 13 px pour un outil dense, 15 px pour une page éditoriale.
     Le défaut est celui des outils ; les pages du hub posent <html class="page">
     et passent à 15 px. Voir base.css. */
  --base:13px;
  --base-outil:13px;
  --base-page:15px;

  /* La palette de l'imprimé, indépendante de l'interface. Elle ne bascule pas
     avec le thème : une planche riso reste une planche riso, posée sur la
     table claire ou sombre. Sert aux vignettes des outils. */
  --riso-papier:#f4d9c8;
  --riso-encre:#2f3aa6;
  --riso-vegetation:#39a35a;
}

/* ---------------------------------------------------------------------------
   Clair : l'encre sur le papier, accent minium.
   Ici --acc et --acc-hi se confondent : le minium tient déjà en petit corps
   sur du papier, inutile de le décliner.
   --------------------------------------------------------------------------- */

html[data-theme="clair"] {
  color-scheme: light;
  --acc:#e8500a;
  --acc-hi:#e8500a;
  --acc-soft:#fbe3d4;
  --desk:#f6f4ee;
  --paper:#fcfbf7;
  --ink:#26241f;
  --mut:#8d8779;
  --faint:#c4beae;
  --hair:#ddd8ca;
  --mid:#b9b3a3;
  --field:#fff;
  --inv-mut:#c4beae;
  --backdrop:rgba(38,36,31,.22);
  --shadow-soft:rgba(38,36,31,.08);
  --shadow-deep:rgba(38,36,31,.55);
}