/* Les jetons du site climat (plan site_climat, § Design, D19) : la source UNIQUE des couleurs, des espaces,
   des rayons, des ombres et des durées. Aucun composant n'écrit une couleur en dur.

   La direction : « carte d'approche ». Un fond neutre, une encre bleu marine, le bleu ciel pour l'action.
   DEUX COULEURS DE SENS, réservées et tenues partout (chiffres, puces, graphiques, carte) :
     - l'AMBRE pour le chaud : Tref, ΔTmax, modèle chaud ;
     - le GLACIER pour le froid : ACT, ΔISA basse.
   Elles ne servent à rien d'autre : une attention se dit en magenta, la couleur des cartes OACI, jamais en
   ambre (une puce d'avertissement ambre se lirait « chaud »).

   Un jeton `*-vif` trace (graphique, carte, poignée) : 3:1 au moins sur la surface ; les autres écrivent du
   texte : 4,5:1 au moins (WCAG AA). Les deux règles sont tenues par tests/test_design.py, thème par thème,
   qui confronte aussi l'ambre et le glacier sous les daltonismes courants.

   Le thème se pose par `data-theme` sur la racine, TOUJOURS (theme.js, avant le premier rendu) : pas de
   second jeu de valeurs sous `prefers-color-scheme`, qui ferait une jumelle à tenir. */

:root {
    color-scheme: light;

    --couleur-fond: #f4f6f9;
    --couleur-surface: #ffffff;
    --couleur-surface-2: #eaeef3;
    --couleur-encre: #0e2238;
    --couleur-encre-2: #3f5266;
    --couleur-encre-3: #5a6b7e;
    --couleur-trait: #d9e0e8;
    --couleur-trait-fort: #aab6c4;
    --couleur-bord-champ: #7c8b9c;
    --couleur-action: #0a66c2;
    --couleur-action-survol: #084f97;
    --couleur-action-fond: #e4f0fb;
    --couleur-sur-action: #ffffff;
    --couleur-chaud: #a85600;
    --couleur-chaud-vif: #d97706;
    --couleur-chaud-fond: #fdf1df;
    --couleur-froid: #0b6a8a;
    --couleur-froid-vif: #1f9cc4;
    --couleur-froid-fond: #e1f3f9;
    --couleur-attention: #a3195b;
    --couleur-attention-fond: #fbe8f1;
    --couleur-erreur: #b42318;
    --couleur-erreur-fond: #fde9e7;
    --couleur-succes: #17693f;
    --couleur-succes-fond: #e2f4ea;
    --couleur-voile: rgba(14, 34, 56, 0.42);
    --couleur-squelette: #e3e8ee;
    --couleur-squelette-reflet: #f1f4f7;

    --ombre-1: 0 1px 2px rgba(14, 34, 56, 0.06), 0 1px 1px rgba(14, 34, 56, 0.04);
    --ombre-2: 0 4px 12px rgba(14, 34, 56, 0.08), 0 1px 3px rgba(14, 34, 56, 0.06);
    --ombre-3: 0 16px 40px rgba(14, 34, 56, 0.16), 0 4px 10px rgba(14, 34, 56, 0.08);

    /* Le fond de carte, sans fournisseur sombre : en thème sombre, les tuiles se retournent (carte.js). */
    --filtre-tuiles: none;

    /* Pas de 4 px. */
    --espace-1: 4px;
    --espace-2: 8px;
    --espace-3: 12px;
    --espace-4: 16px;
    --espace-5: 24px;
    --espace-6: 32px;
    --espace-7: 48px;
    --espace-8: 64px;

    --rayon-1: 4px;
    --rayon-2: 8px;
    --rayon-3: 12px;
    --rayon-plein: 999px;

    --duree-rapide: 150ms;
    --duree: 200ms;
    --courbe: cubic-bezier(0.2, 0, 0, 1);

    --police-texte: "Inter", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --police-chiffres: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    --taille-xs: 0.75rem;
    --taille-s: 0.8125rem;
    --taille-m: 0.9375rem;
    --taille-l: 1.125rem;
    --taille-xl: 1.5rem;
    --taille-2xl: 2rem;
    --taille-heros: clamp(2.5rem, 2rem + 2.2vw, 3.75rem);

    --largeur-page: 1240px;
    --largeur-lecture: 68ch;
    --hauteur-entete: 56px;
    --cible-min: 36px;
    --poignee: 24px;
}

/* D21, responsive : au doigt, les cibles grandissent. Toutes les lisent par ce jeton. */
@media (pointer: coarse) {
    :root { --cible-min: 44px; --poignee: 32px; }
}

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

    --couleur-fond: #0a1420;
    --couleur-surface: #111e2d;
    --couleur-surface-2: #1a2a3c;
    --couleur-encre: #e9eff6;
    --couleur-encre-2: #b6c3d2;
    --couleur-encre-3: #94a4b6;
    --couleur-trait: #24364a;
    --couleur-trait-fort: #41566e;
    --couleur-bord-champ: #6d8299;
    --couleur-action: #63b3f6;
    --couleur-action-survol: #8cc8fa;
    --couleur-action-fond: #12304a;
    --couleur-sur-action: #06121e;
    --couleur-chaud: #f5b14c;
    --couleur-chaud-vif: #f0a030;
    --couleur-chaud-fond: #2d2110;
    --couleur-froid: #6fd0e8;
    --couleur-froid-vif: #45bcdb;
    --couleur-froid-fond: #0d2a34;
    --couleur-attention: #f58ab8;
    --couleur-attention-fond: #33142a;
    --couleur-erreur: #ff9c91;
    --couleur-erreur-fond: #351714;
    --couleur-succes: #72d6a2;
    --couleur-succes-fond: #10291d;
    --couleur-voile: rgba(3, 9, 16, 0.62);
    --couleur-squelette: #1a2a3c;
    --couleur-squelette-reflet: #24364a;

    --ombre-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --ombre-2: 0 4px 12px rgba(0, 0, 0, 0.45);
    --ombre-3: 0 16px 40px rgba(0, 0, 0, 0.6);

    --filtre-tuiles: invert(1) hue-rotate(180deg) brightness(0.95) contrast(0.9) saturate(0.7);
}