/* =========================================================================
   Jetons de design — la seule source de vérité pour la couleur et l'espace.
   =========================================================================

   Rien, nulle part ailleurs, n'écrit une couleur en dur. Tout passe par ces
   variables, ce qui a deux conséquences : chaque thème est un jeu de valeurs
   choisi pour lui — jamais le négatif d'un autre — et changer d'accentuation
   ne demande de toucher qu'une ligne.

   ── Quatre thèmes, et le mode automatique ───────────────────────────────

   « Blanc » pour la lumière du jour et les écrans très lumineux. « Crème »
   pour le confort, un blanc légèrement chaud où l'argent paraît moins
   clinique. « Sombre » pour le soir, gris-prune plutôt que noir, parce que
   le noir absolu fait vibrer le texte clair. « Nuit » pour lire au lit sur
   un écran OLED, où le vrai noir n'allume aucun pixel.

   Le mode automatique ne pose **aucun** attribut sur la racine et laisse le
   système décider entre crème et sombre. Un thème choisi pose `data-theme`
   et gagne alors dans les deux sens, sans avoir besoin de `!important` ni de
   sélecteurs alambiqués : `:root:not([data-theme])` ne s'applique tout
   simplement plus.

   ── Le principe qui évite la duplication ────────────────────────────────

   Chaque famille de couleurs déclare ses deux versions — claire et sombre —
   sous des noms distincts. Le thème se contente ensuite de choisir laquelle
   alimente la variable réellement utilisée. Une palette d'accentuation
   s'écrit donc une seule fois, au lieu d'être recopiée dans chaque thème.

   ── La couleur des graphiques ───────────────────────────────────────────

   Les teintes des séries ne sont pas choisies à l'œil : elles sont validées
   par `scripts/validate_palette.py`, qui mesure la bande de clarté, le
   chroma, la séparation en vision daltonienne et le contraste sur les
   surfaces réelles. Les modifier sans rejouer ce script, c'est casser la
   lisibilité pour huit pour cent des hommes.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Ce qui ne dépend d'aucun thème
   ------------------------------------------------------------------------- */

:root {
  /* ── Typographie ───────────────────────────────────────────────────────
     Tailles fluides : le même réglage tient du téléphone au grand écran
     sans point de rupture. */
  --police: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
            "Helvetica Neue", Arial, sans-serif;

  --t-micro:  0.6875rem;
  --t-petit:  0.8125rem;
  --t-base:   0.9375rem;
  --t-moyen:  1.0625rem;
  --t-grand:  clamp(1.25rem, 1.05rem + .8vw, 1.5rem);
  --t-titre:  clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
  --t-heros:  clamp(2.25rem, 1.6rem + 3.2vw, 3.5rem);

  --graisse-normale: 400;
  --graisse-moyenne: 550;
  --graisse-forte:   680;

  /* ── Espace ────────────────────────────────────────────────────────────
     Échelle géométrique : les valeurs intermédiaires n'existent pas, ce qui
     rend un alignement approximatif impossible. */
  --e0: .25rem;  --e1: .5rem;   --e2: .75rem;  --e3: 1rem;
  --e4: 1.5rem;  --e5: 2rem;    --e6: 3rem;    --e7: 4rem;

  /* ── Rayons ────────────────────────────────────────────────────────────
     Généreux : les angles doux baissent la tension perçue, ce qui n'est pas
     un détail quand on regarde son découvert. */
  --r-petit:  8px;
  --r-moyen:  14px;
  --r-grand:  20px;
  --r-carte:  22px;
  --r-plein:  999px;

  /* ── Mouvement ─────────────────────────────────────────────────────────
     Deux courbes seulement. « sortie » démarre vite et s'apaise : celle du
     calme. « ressort » dépasse légèrement sa cible, réservée aux apparitions
     qu'on veut sentir. */
  --sortie:  cubic-bezier(.2, .8, .3, 1);
  --ressort: cubic-bezier(.34, 1.56, .64, 1);
  --v-court:  120ms;
  --v-moyen:  240ms;
  --v-long:   420ms;

  /* ── Structure ─────────────────────────────────────────────────────────*/
  --largeur-rail: 248px;
  --largeur-max:  1360px;
  --hauteur-barre-mobile: 68px;
  --hauteur-action-flottante: 54px;

  /* ── États ─────────────────────────────────────────────────────────────
     Palette réservée : jamais réutilisée pour une série de graphique.
     Toujours accompagnée d'une icône et d'un mot — la couleur seule ne
     porte jamais le sens. */
  --bien:          #0ca30c;
  --attention-vif: #fab219;
  --serieux:       #ec835a;
  --critique-vif:  #d03b3b;
}

/* -------------------------------------------------------------------------
   2. Les deux versions de chaque famille de couleurs
   -------------------------------------------------------------------------
   Déclarées une seule fois. Le thème choisit ensuite laquelle alimente les
   variables réellement utilisées par les composants.
   ------------------------------------------------------------------------- */

:root {
  /* Séries de graphiques, dans un ordre fixe. Jamais recyclées : une
     neuvième série rejoint « Autres » plutôt que d'inventer une teinte. */
  --serie-1-jour: #2a78d6;  --serie-1-nuit: #3987e5;
  --serie-2-jour: #eb6834;  --serie-2-nuit: #d95926;
  --serie-3-jour: #1baf7a;  --serie-3-nuit: #199e70;
  --serie-4-jour: #eda100;  --serie-4-nuit: #c98500;
  --serie-5-jour: #e87ba4;  --serie-5-nuit: #d55181;
  --serie-6-jour: #008300;  --serie-6-nuit: #008300;
  --serie-7-jour: #4a3aa7;  --serie-7-nuit: #9085e9;
  --serie-8-jour: #e34948;  --serie-8-nuit: #e66767;

  /* Rampe séquentielle, pour les magnitudes continues. */
  --seq-100-jour: #cde2fb;  --seq-100-nuit: #184f95;
  --seq-300-jour: #6da7ec;  --seq-300-nuit: #256abf;
  --seq-450-jour: #2a78d6;  --seq-450-nuit: #3987e5;
  --seq-600-jour: #184f95;  --seq-600-nuit: #86b6ef;

  /* Encres d'état : la même teinte n'est pas lisible sur les deux fonds. */
  --bien-encre-jour:      #006300;  --bien-encre-nuit:      #4ade4a;
  --attention-encre-jour: #b07a00;  --attention-encre-nuit: #fab219;
  --critique-encre-jour:  #c1352f;  --critique-encre-nuit:  #e26b66;

  /* Teintes des membres du foyer. Une même personne garde sa couleur
     partout : pastille, graphique, jauge d'équilibrage. */
  --membre-1-jour: #3d7f6e;  --membre-1-nuit: #6fae9c;
  --membre-2-jour: #a8577c;  --membre-2-nuit: #d18cac;
  --membre-3-jour: #3a5a8c;  --membre-3-nuit: #8aa9d6;
  --membre-4-jour: #b05e3b;  --membre-4-nuit: #d99671;
  --membre-5-jour: #1f6f7a;  --membre-5-nuit: #63a7b0;
  --membre-6-jour: #8d6a1f;  --membre-6-nuit: #d9ab52;
}

/* -------------------------------------------------------------------------
   3. Le thème clair par défaut : crème
   ------------------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Un blanc légèrement chaud plutôt qu'un blanc pur : moins agressif le
     soir, et l'argent y paraît moins clinique. */
  --plan:           #f6f2ec;
  --surface:        #fffdf9;
  --surface-haute:  #ffffff;
  --surface-creuse: #efe9e0;
  --voile:          rgba(35, 28, 22, .38);

  --encre:          #1c1a17;
  --encre-douce:    #56514a;
  --encre-tenue:    #857e74;
  --encre-inversee: #fffdf9;

  --trait:          #e3dbd0;
  --trait-marque:   #d2c8ba;
  --trait-cheveu:   rgba(28, 26, 23, .08);

  --grille:         #e8e1d6;
  --axe:            #cfc6b8;

  /* Ombres teintées vers le brun : sur un fond chaud, une ombre neutre
     paraît sale. */
  --ombre-1: 0 1px 2px rgba(60, 45, 30, .06), 0 1px 1px rgba(60, 45, 30, .04);
  --ombre-2: 0 2px 4px rgba(60, 45, 30, .07), 0 4px 12px rgba(60, 45, 30, .06);
  --ombre-3: 0 8px 24px rgba(60, 45, 30, .12), 0 2px 6px rgba(60, 45, 30, .08);
  --ombre-4: 0 20px 50px rgba(45, 33, 22, .22), 0 4px 12px rgba(45, 33, 22, .10);

  /* Aiguillage des familles vers leur version claire. */
  --serie-1: var(--serie-1-jour);  --serie-2: var(--serie-2-jour);
  --serie-3: var(--serie-3-jour);  --serie-4: var(--serie-4-jour);
  --serie-5: var(--serie-5-jour);  --serie-6: var(--serie-6-jour);
  --serie-7: var(--serie-7-jour);  --serie-8: var(--serie-8-jour);
  --sequentiel-100: var(--seq-100-jour);
  --sequentiel-300: var(--seq-300-jour);
  --sequentiel-450: var(--seq-450-jour);
  --sequentiel-600: var(--seq-600-jour);
  --bien-encre:      var(--bien-encre-jour);
  --attention:       var(--attention-encre-jour);
  --critique:        var(--critique-encre-jour);
  --membre-1: var(--membre-1-jour);  --membre-2: var(--membre-2-jour);
  --membre-3: var(--membre-3-jour);  --membre-4: var(--membre-4-jour);
  --membre-5: var(--membre-5-jour);  --membre-6: var(--membre-6-jour);
  --accent:        var(--accent-jour);
  --accent-fonce:  var(--accent-fonce-jour);
  --accent-clair:  var(--accent-clair-jour);
  --accent-encre:  var(--accent-encre-jour);
}

/* -------------------------------------------------------------------------
   4. Thème « blanc » : la lumière du jour
   -------------------------------------------------------------------------
   Neutre et franc, pour un écran très lumineux ou une pièce ensoleillée. Les
   ombres y sont plus grises, parce que sur un fond neutre une ombre chaude
   paraît jaunie.
   ------------------------------------------------------------------------- */

:root[data-theme="blanc"] {
  color-scheme: light;

  --plan:           #f2f3f5;
  --surface:        #ffffff;
  --surface-haute:  #ffffff;
  --surface-creuse: #eceef1;
  --voile:          rgba(20, 22, 26, .38);

  --encre:          #14161a;
  --encre-douce:    #4b5058;
  --encre-tenue:    #7c828c;
  --encre-inversee: #ffffff;

  --trait:          #e2e5ea;
  --trait-marque:   #ccd1d9;
  --trait-cheveu:   rgba(20, 22, 26, .08);

  --grille:         #e8eaee;
  --axe:            #c8cdd5;

  --ombre-1: 0 1px 2px rgba(20, 25, 40, .06), 0 1px 1px rgba(20, 25, 40, .04);
  --ombre-2: 0 2px 4px rgba(20, 25, 40, .07), 0 4px 12px rgba(20, 25, 40, .06);
  --ombre-3: 0 8px 24px rgba(20, 25, 40, .12), 0 2px 6px rgba(20, 25, 40, .08);
  --ombre-4: 0 20px 50px rgba(15, 20, 35, .22), 0 4px 12px rgba(15, 20, 35, .10);
}

/* -------------------------------------------------------------------------
   5. Thème « crème » : identique au défaut, mais choisi explicitement
   -------------------------------------------------------------------------
   Nécessaire pour qu'un utilisateur en mode automatique sur un système
   sombre puisse quand même imposer le clair.
   ------------------------------------------------------------------------- */

:root[data-theme="creme"] {
  color-scheme: light;

  --plan:           #f6f2ec;
  --surface:        #fffdf9;
  --surface-haute:  #ffffff;
  --surface-creuse: #efe9e0;
  --voile:          rgba(35, 28, 22, .38);

  --encre:          #1c1a17;
  --encre-douce:    #56514a;
  --encre-tenue:    #857e74;
  --encre-inversee: #fffdf9;

  --trait:          #e3dbd0;
  --trait-marque:   #d2c8ba;
  --trait-cheveu:   rgba(28, 26, 23, .08);

  --grille:         #e8e1d6;
  --axe:            #cfc6b8;
}

/* -------------------------------------------------------------------------
   6. Les fonds sombres
   -------------------------------------------------------------------------
   Trois portes vers le même jeu de valeurs : le système en mode automatique,
   le thème « sombre », le thème « nuit ». Les deux derniers ne diffèrent que
   par leurs surfaces, redéfinies juste après.
   ------------------------------------------------------------------------- */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;

    --plan:           #121116;
    --surface:        #1a1920;
    --surface-haute:  #23212b;
    --surface-creuse: #14131a;
    --voile:          rgba(6, 5, 9, .62);

    --encre:          #f4f1ec;
    --encre-douce:    #b6b0be;
    --encre-tenue:    #857f8e;
    --encre-inversee: #16151b;

    --trait:          #2c2a35;
    --trait-marque:   #3d3a49;
    --trait-cheveu:   rgba(255, 253, 249, .09);

    --grille:         #292731;
    --axe:            #3a3745;

    --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ombre-2: 0 2px 6px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .3);
    --ombre-3: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
    --ombre-4: 0 24px 60px rgba(0, 0, 0, .62), 0 6px 16px rgba(0, 0, 0, .45);

    --serie-1: var(--serie-1-nuit);  --serie-2: var(--serie-2-nuit);
    --serie-3: var(--serie-3-nuit);  --serie-4: var(--serie-4-nuit);
    --serie-5: var(--serie-5-nuit);  --serie-6: var(--serie-6-nuit);
    --serie-7: var(--serie-7-nuit);  --serie-8: var(--serie-8-nuit);
    --sequentiel-100: var(--seq-100-nuit);
    --sequentiel-300: var(--seq-300-nuit);
    --sequentiel-450: var(--seq-450-nuit);
    --sequentiel-600: var(--seq-600-nuit);
    --bien-encre:      var(--bien-encre-nuit);
    --attention:       var(--attention-encre-nuit);
    --critique:        var(--critique-encre-nuit);
    --membre-1: var(--membre-1-nuit);  --membre-2: var(--membre-2-nuit);
    --membre-3: var(--membre-3-nuit);  --membre-4: var(--membre-4-nuit);
    --membre-5: var(--membre-5-nuit);  --membre-6: var(--membre-6-nuit);
    --accent:        var(--accent-nuit);
    --accent-fonce:  var(--accent-fonce-nuit);
    --accent-clair:  var(--accent-clair-nuit);
    --accent-encre:  var(--accent-encre-nuit);
  }
}

:root[data-theme="sombre"],
:root[data-theme="nuit"] {
  color-scheme: dark;

  --plan:           #121116;
  --surface:        #1a1920;
  --surface-haute:  #23212b;
  --surface-creuse: #14131a;
  --voile:          rgba(6, 5, 9, .62);

  --encre:          #f4f1ec;
  --encre-douce:    #b6b0be;
  --encre-tenue:    #857f8e;
  --encre-inversee: #16151b;

  --trait:          #2c2a35;
  --trait-marque:   #3d3a49;
  --trait-cheveu:   rgba(255, 253, 249, .09);

  --grille:         #292731;
  --axe:            #3a3745;

  --ombre-1: 0 1px 2px rgba(0, 0, 0, .4);
  --ombre-2: 0 2px 6px rgba(0, 0, 0, .45), 0 6px 16px rgba(0, 0, 0, .3);
  --ombre-3: 0 10px 30px rgba(0, 0, 0, .5), 0 2px 8px rgba(0, 0, 0, .35);
  --ombre-4: 0 24px 60px rgba(0, 0, 0, .62), 0 6px 16px rgba(0, 0, 0, .45);

  --serie-1: var(--serie-1-nuit);  --serie-2: var(--serie-2-nuit);
  --serie-3: var(--serie-3-nuit);  --serie-4: var(--serie-4-nuit);
  --serie-5: var(--serie-5-nuit);  --serie-6: var(--serie-6-nuit);
  --serie-7: var(--serie-7-nuit);  --serie-8: var(--serie-8-nuit);
  --sequentiel-100: var(--seq-100-nuit);
  --sequentiel-300: var(--seq-300-nuit);
  --sequentiel-450: var(--seq-450-nuit);
  --sequentiel-600: var(--seq-600-nuit);
  --bien-encre:      var(--bien-encre-nuit);
  --attention:       var(--attention-encre-nuit);
  --critique:        var(--critique-encre-nuit);
  --membre-1: var(--membre-1-nuit);  --membre-2: var(--membre-2-nuit);
  --membre-3: var(--membre-3-nuit);  --membre-4: var(--membre-4-nuit);
  --membre-5: var(--membre-5-nuit);  --membre-6: var(--membre-6-nuit);
  --accent:        var(--accent-nuit);
  --accent-fonce:  var(--accent-fonce-nuit);
  --accent-clair:  var(--accent-clair-nuit);
  --accent-encre:  var(--accent-encre-nuit);
}

/* -------------------------------------------------------------------------
   7. Thème « nuit » : le vrai noir
   -------------------------------------------------------------------------
   Sur un écran OLED, un pixel noir est un pixel éteint : moins de lumière
   dans les yeux au lit, et moins de batterie consommée. Les surfaces ne sont
   plus des gris colorés mais des noirs très légèrement éclaircis, et les
   traits remplacent les ombres — une ombre sur du noir ne se voit pas.
   ------------------------------------------------------------------------- */

:root[data-theme="nuit"] {
  --plan:           #000000;
  --surface:        #0a0a0c;
  --surface-haute:  #141418;
  --surface-creuse: #050506;

  --encre:          #eceaef;
  --encre-douce:    #a8a3b0;
  --encre-tenue:    #78737f;
  --encre-inversee: #000000;

  --trait:          #232329;
  --trait-marque:   #33323b;
  --trait-cheveu:   rgba(255, 255, 255, .10);

  --grille:         #1c1c21;
  --axe:            #2e2d36;

  /* Sur du noir absolu, une ombre est invisible : c'est le liseré qui
     détache les surfaces. On la garde minimale pour les modales, qui ont
     besoin de flotter. */
  --ombre-1: none;
  --ombre-2: 0 2px 8px rgba(0, 0, 0, .8);
  --ombre-3: 0 8px 28px rgba(0, 0, 0, .9);
  --ombre-4: 0 24px 64px rgba(0, 0, 0, .95);
}

/* -------------------------------------------------------------------------
   8. Palettes d'accentuation
   -------------------------------------------------------------------------
   Chacune déclare ses deux versions ; le thème choisit. Les valeurs sombres
   sont plus claires et moins saturées : une teinte foncée sur fond foncé
   disparaît.
   ------------------------------------------------------------------------- */

:root,
[data-accent="sauge"] {
  --accent-jour: #3d7f6e; --accent-fonce-jour: #2e6154; --accent-clair-jour: #6fae9c; --accent-encre-jour: #ffffff;
  --accent-nuit: #6fae9c; --accent-fonce-nuit: #4d8c7a; --accent-clair-nuit: #97cbbb; --accent-encre-nuit: #10201c;
}
[data-accent="terre"] {
  --accent-jour: #b05e3b; --accent-fonce-jour: #8c482c; --accent-clair-jour: #d99671; --accent-encre-jour: #ffffff;
  --accent-nuit: #d99671; --accent-fonce-nuit: #b0704e; --accent-clair-nuit: #eeb897; --accent-encre-nuit: #24140c;
}
[data-accent="encre"] {
  --accent-jour: #3a5a8c; --accent-fonce-jour: #2b4470; --accent-clair-jour: #7b9bc9; --accent-encre-jour: #ffffff;
  --accent-nuit: #8aa9d6; --accent-fonce-nuit: #6486b5; --accent-clair-nuit: #b3c8e6; --accent-encre-nuit: #0f1723;
}
[data-accent="prune"] {
  --accent-jour: #8d4f75; --accent-fonce-jour: #6f3c5c; --accent-clair-jour: #c088a8; --accent-encre-jour: #ffffff;
  --accent-nuit: #c088a8; --accent-fonce-nuit: #9a6685; --accent-clair-nuit: #dcb0c8; --accent-encre-nuit: #210f1a;
}
[data-accent="ocean"] {
  --accent-jour: #1f6f7a; --accent-fonce-jour: #155660; --accent-clair-jour: #63a7b0; --accent-encre-jour: #ffffff;
  --accent-nuit: #63a7b0; --accent-fonce-nuit: #43848d; --accent-clair-nuit: #93c8ce; --accent-encre-nuit: #0a1f22;
}
[data-accent="ambre"] {
  --accent-jour: #9a6a12; --accent-fonce-jour: #7a530b; --accent-clair-jour: #d5a94f; --accent-encre-jour: #ffffff;
  --accent-nuit: #d9ab52; --accent-fonce-nuit: #ad8437; --accent-clair-nuit: #ecca8b; --accent-encre-nuit: #221803;
}

/* Dérivés de l'accentuation, calculés une fois pour toutes. */
:root {
  --accent-voile: color-mix(in oklab, var(--accent) 12%, transparent);
  --accent-halo:  color-mix(in oklab, var(--accent) 22%, transparent);

  --bien-voile:      color-mix(in oklab, var(--bien) 14%, transparent);
  --attention-voile: color-mix(in oklab, var(--attention-vif) 20%, transparent);
  --critique-voile:  color-mix(in oklab, var(--critique-vif) 12%, transparent);
}

/* -------------------------------------------------------------------------
   9. Densité
   -------------------------------------------------------------------------
   Pour ceux qui préfèrent voir plus de lignes à l'écran que d'air autour.
   ------------------------------------------------------------------------- */

[data-densite="compacte"] {
  --e3: .75rem; --e4: 1.125rem; --e5: 1.5rem; --e6: 2.25rem;
  --r-carte: 16px;
  --t-base: 0.9rem;
}

/* -------------------------------------------------------------------------
   10. Confort de lecture
   -------------------------------------------------------------------------
   Un réglage indépendant du thème : agrandit tout le texte sans casser la
   mise en page, puisque toutes les tailles dérivent de la même échelle.
   ------------------------------------------------------------------------- */

[data-texte="grand"] {
  --t-micro: 0.78rem;
  --t-petit: 0.9rem;
  --t-base:  1.06rem;
  --t-moyen: 1.2rem;
}