/* CRM — thème : SEUL fichier qui contient des couleurs (voir docs/DESIGN.md).
   Les composants (app.css) n'utilisent que les variables définies ici.

   1. La palette de l'entreprise (choisie par l'administrateur) fixe trois teintes :
        --p-clair  : accent du mode clair (assombri si besoin pour un contraste AA de 4,5 au moins)
        --p-vif    : teinte de la maquette, pour les lueurs et l'échantillon de couleur
        --p-sombre : accent du mode sombre
   2. Le mode (clair ou sombre) fixe les fonds, textes, bordures, états et ombres.
   3. Les variables dérivées (pâles, séries de graphiques…) se calculent à partir des deux.

   Syntaxe volontairement simple (hex, rgba, var, color-mix in srgb) : tests/unitaires/theme.test.js
   la relit pour contrôler le contraste de chaque palette dans chaque mode. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2-variations"), url("/static/fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations"), url("/static/fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Palettes (la première est celle par défaut) --- */

:root,
[data-palette="bleu"] { --p-clair: #0033cc; --p-vif: #0033cc; --p-sombre: #658eff; }
[data-palette="cyan"] { --p-clair: #097089; --p-vif: #0a7f9c; --p-sombre: #3fd4f0; }
[data-palette="vert"] { --p-clair: #047550; --p-vif: #058a5e; --p-sombre: #3ddc97; }
[data-palette="violet"] { --p-clair: #6d3fe0; --p-vif: #6d3fe0; --p-sombre: #a78bfa; }
[data-palette="orange"] { --p-clair: #b24209; --p-vif: #d9510b; --p-sombre: #ff9a55; }
[data-palette="rose"] { --p-clair: #bf2166; --p-vif: #d0246f; --p-sombre: #ff7ab3; }
[data-palette="graphite"] { --p-clair: #334155; --p-vif: #334155; --p-sombre: #a3b1c6; }
[data-palette="or"] { --p-clair: #8b5f0c; --p-vif: #a8730f; --p-sombre: #f5c04a; }

/* --- Mode clair (par défaut) --- */

:root {
  color-scheme: light;
  --fond: #eef2f9;
  --fond-2: #e4e9f3;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-pleine: #ffffff;
  --surface-menu: rgba(255, 255, 255, 0.62);
  --bord: rgba(20, 33, 61, 0.11);
  --bord-champ: #8792a8;
  --texte: #101a33;
  --texte-doux: #56637e;
  --accent: var(--p-clair);
  --accent-vif: var(--p-vif);
  --sur-accent: #ffffff;
  --ok: #0b754b;
  --attention: #8d5d18;
  --erreur: #ba372a;
  --lueur-2: rgba(102, 153, 204, 0.22);
  --voile: rgba(10, 15, 30, 0.38);
  --ombre-legere: 0 1px 2px rgba(16, 26, 51, 0.05), 0 1px 3px rgba(16, 26, 51, 0.07);
  --ombre: 0 10px 30px -12px rgba(16, 26, 51, 0.18);
  --ombre-forte: 0 18px 50px -12px rgba(16, 26, 51, 0.32);
  --cartouche: #ffffff;
  --avatar-bulle: #ffffff;
}

/* --- Mode sombre : automatique (réglage de l'appareil) ou choisi par la personne ---
   Les deux blocs doivent rester identiques (vérifié par le test). Le mode automatique ne vaut que
   pour l'écran ; pour le mode choisi, theme.js le retire le temps d'une impression. */

@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fond: #0a0f1e;
    --fond-2: #0e1428;
    --surface: rgba(255, 255, 255, 0.045);
    --surface-pleine: #111832;
    --surface-menu: rgba(255, 255, 255, 0.03);
    --bord: rgba(255, 255, 255, 0.1);
    --bord-champ: #5f6c8a;
    --texte: #e8edf9;
    --texte-doux: #97a3bf;
    --accent: var(--p-sombre);
    --accent-vif: var(--p-sombre);
    --sur-accent: #0a0f1e;
    --ok: #3ddc97;
    --attention: #f2b84b;
    --erreur: #ff7a6b;
    --lueur-2: rgba(80, 200, 255, 0.1);
    --voile: rgba(0, 0, 0, 0.55);
    --ombre-legere: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ombre: 0 14px 40px -16px rgba(0, 0, 0, 0.7);
    --ombre-forte: 0 20px 60px -12px rgba(0, 0, 0, 0.8);
    --cartouche: #ffffff;
    --avatar-bulle: #ffffff;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --fond: #0a0f1e;
  --fond-2: #0e1428;
  --surface: rgba(255, 255, 255, 0.045);
  --surface-pleine: #111832;
  --surface-menu: rgba(255, 255, 255, 0.03);
  --bord: rgba(255, 255, 255, 0.1);
  --bord-champ: #5f6c8a;
  --texte: #e8edf9;
  --texte-doux: #97a3bf;
  --accent: var(--p-sombre);
  --accent-vif: var(--p-sombre);
  --sur-accent: #0a0f1e;
  --ok: #3ddc97;
  --attention: #f2b84b;
  --erreur: #ff7a6b;
  --lueur-2: rgba(80, 200, 255, 0.1);
  --voile: rgba(0, 0, 0, 0.55);
  --ombre-legere: 0 1px 2px rgba(0, 0, 0, 0.3);
  --ombre: 0 14px 40px -16px rgba(0, 0, 0, 0.7);
  --ombre-forte: 0 20px 60px -12px rgba(0, 0, 0, 0.8);
  --cartouche: #ffffff;
  --avatar-bulle: #ffffff;
}

/* --- Variables dérivées (valables dans les deux modes) --- */

:root {
  --accent-pale: color-mix(in srgb, var(--accent) 12%, var(--surface-pleine));
  --accent-survol: color-mix(in srgb, var(--accent) 85%, var(--texte));
  --ok-pale: color-mix(in srgb, var(--ok) 12%, var(--surface-pleine));
  --attention-pale: color-mix(in srgb, var(--attention) 12%, var(--surface-pleine));
  --erreur-pale: color-mix(in srgb, var(--erreur) 12%, var(--surface-pleine));
  --neutre-pale: color-mix(in srgb, var(--texte-doux) 12%, var(--surface-pleine));
  --lueur-1: color-mix(in srgb, var(--accent-vif) 20%, transparent);
  --anneau: color-mix(in srgb, var(--accent) 35%, transparent);
  /* Séries des graphiques : mêmes couleurs que les états. */
  --serie-1: var(--accent);
  --serie-2: var(--ok);
  --serie-3: var(--erreur);
  --serie-4: var(--attention);
  --serie-5: var(--texte-doux);
  --serie-6: color-mix(in srgb, var(--accent) 50%, var(--texte));
  /* Effet verre : surface translucide et flou. */
  --surface-verre: var(--surface);
  --flou: blur(14px);
}

/* Téléphone, ou personne qui demande moins de transparence : pas de flou (plus léger, plus lisible). */
@media (max-width: 900px), (prefers-reduced-transparency: reduce) {
  :root {
    --surface-verre: var(--surface-pleine);
    --flou: none;
  }
}