/*
 * Jetons de design : TOUTES les valeurs visuelles (couleurs, typographie, espacements, formes).
 * Les composants (app.css) n'utilisent que ces variables ; un thème (theme-*.css) les redéfinit.
 * Couleurs : light-dark(<clair>, <sombre>) — un seul jeton par rôle, le mode est choisi par `color-scheme`.
 * Contraste AA (4,5:1) vérifié pour chaque couple texte/fond utilisé, dans les deux modes.
 * Voir docs/design.md. Rendu de tous les composants : /admin/design.
 */
@layer jetons, composants, theme;

@layer jetons {
	:root {
		color-scheme: light dark;

		/* Couleurs — fonds */
		--fond: light-dark(#fff, #15171b);              /* page */
		--surface: light-dark(#f4f6f8, #1e2126);        /* cartes, boutons secondaires, messages, code, survol de ligne */
		--surface-forte: light-dark(#e7ebef, #2a2e35);  /* survol, pastille neutre */

		/* Couleurs — texte et traits */
		--texte: light-dark(#14181f, #e7e9ec);
		--texte-doux: light-dark(#5a6270, #9aa3ad);     /* légendes, en-têtes de tableau, aides */
		--ligne: light-dark(#dde2e8, #2f343b);          /* bordures, séparateurs */

		/* Couleurs — marque et sens */
		--lien: light-dark(#1a56db, #8ab4f8);
		/* Liens : soulignement fin et discret (teinte du lien atténuée), plein au survol et au focus. Jamais la couleur seule (WCAG 1.4.1) :
		   --lien-ligne vaut underline, sauf choix « au survol » de l'admin (le texte courant garde alors son soulignement). */
		--lien-ligne: underline;
		--lien-trait: color-mix(in srgb, currentColor 32%, transparent);  /* couleur du soulignement au repos */
		--lien-trait-survol: currentColor;
		--lien-epaisseur: 1px;
		--lien-epaisseur-survol: 1.5px;
		--lien-decalage: .24em;                         /* distance texte–soulignement */
		--lien-graisse: inherit;
		--accent: light-dark(#0f766e, #2dd4bf);         /* marque DataLex : logo, bouton principal, focus, sélection, graphiques */
		--accent-fond: light-dark(#e6f4f2, #12302d);    /* fond teinté de l'accent : bannière, ligne sélectionnée */
		--sur-accent: light-dark(#fff, #0b1f1c);        /* texte posé sur --accent (bouton principal) */
		--succes: light-dark(#166a2e, #6fd08c);
		--succes-fond: light-dark(#e6f4ea, #16301f);    /* pastille « ok », message de confirmation */
		--danger: light-dark(#b42318, #ff8a80);
		--danger-fond: light-dark(#fdecea, #3a1d1b);    /* pastille « alerte », message d'erreur */
		--attention: light-dark(#7a4d00, #f0c060);      /* pastille « attention » (délai à venir, droit UE) */
		--attention-fond: light-dark(#fdf3dc, #3a2f15);

		/* Couleurs — surlignage des annotations (fonds sous le texte, jamais seuls : l'annotation garde sa citation et son libellé de couleur).
		   Contraste du texte (--texte) sur chaque fond ≥ 4,5:1 dans les deux modes. */
		--surligne-jaune: light-dark(#fff1a8, #5a4a08);
		--surligne-vert: light-dark(#c8f0cc, #1d4f2b);
		--surligne-bleu: light-dark(#cfe3ff, #1f4373);
		--surligne-rose: light-dark(#ffd6e5, #6e2644);

		/* Couleurs — graphiques de vote. Échelle divergente : pour (bleu) ↔ contre (rouge), abstention au milieu en gris neutre.
		   Validées daltonisme (protan/deutan, ΔE ≥ 8 entre voisins) et contraste ≥ 3:1 sur --fond, dans les deux modes.
		   Jamais seules : légende avec libellé et valeur, et tableau de données à côté. */
		--vote-pour: light-dark(#2a78d6, #3987e5);
		--vote-contre: light-dark(#e34948, #e66767);
		--vote-abstention: light-dark(#8f8e88, #b0afa9);
		--vote-absent: var(--ligne);                    /* place sans vote : recule vers le fond */

		/* Couleurs — familles de groupes politiques (pastille de couleur du groupe), de la gauche à la droite. Un jeton par famille ; la famille d'un
		   groupe vient de son sigle (vues/groupes.ts). Contraste ≥ 3:1 sur --fond dans les deux modes (marque graphique), voisins distincts
		   en vision normale et sous daltonisme (ΔE ≥ 9). Jamais le texte en couleur de groupe, jamais seules : le sigle est toujours écrit à côté. */
		--groupe-gauche-radicale: light-dark(#a4161a, #ff6b60);
		--groupe-gauche: light-dark(#d6336c, #ff8fb8);
		--groupe-ecologiste: light-dark(#1e6b45, #3fb36e);
		--groupe-centre-gauche: light-dark(#7a6a00, #f0cf55);
		--groupe-centre: light-dark(#e0650a, #ff8a3d);
		--groupe-centre-droit: light-dark(#1b9ac0, #2bb8de);
		--groupe-independants: light-dark(#5b3fa8, #cdbfff);
		--groupe-droite: light-dark(#2f6fdc, #5b97ff);
		--groupe-extreme-droite: light-dark(#3b2a24, #d3b7a6);

		/* Couleurs — résultats électoraux : regroupements d'affichage des nuances (indicatifs ; le code de nuance et son libellé sont toujours écrits à côté).
		   Contraste ≥ 3:1 sur --fond dans les deux modes ; jamais seules : légende chiffrée, info-bulle et tableau à côté. */
		--chambre-an: light-dark(#1d4ed8, #7aa7ff);          /* Assemblée nationale : repère d'agenda et de listes (jamais seul : l'étiquette AN / Sénat reste écrite) */
		--chambre-sn: light-dark(#a8560c, #f0a860);          /* Sénat */
		--famille-extreme-gauche: light-dark(#8b1a4a, #e57fb0);
		--famille-gauche: light-dark(#d63a4a, #f07a86);
		--famille-ecologistes: light-dark(#2a8a4a, #5ccf82);
		--famille-centre: light-dark(#b27d00, #f0c040);
		--famille-droite: light-dark(#1f6fd0, #6aa6f2);
		--famille-extreme-droite: light-dark(#5b3a1e, #c9a07a);
		--famille-regionalistes: light-dark(#7b4fc9, #b79cf0);
		--famille-divers: light-dark(#6e7681, #a0a8b2);

		/* Couleurs — natures de la frise chronologique des champs du droit (barres empilées, pastilles, légende). Contraste ≥ 3:1 sur --fond ET sur --surface-forte
		   (pastille) dans les deux modes ; jamais seules : le libellé de la nature (pastille, légende, info-bulle, tableau) est toujours écrit à côté. */
		--nature-loi: light-dark(#2a62c9, #6aa6f2);
		--nature-ordonnance: light-dark(#7b4fc9, #b79cf0);
		--nature-decret: light-dark(#1f7a3e, #5ccf82);
		--nature-arrete: light-dark(#a86f00, #f0c040);
		--nature-autre: light-dark(#6e7681, #a0a8b2);
		--nature-dossier: light-dark(#c4313f, #f07a86);
		--nature-decision: light-dark(#0e7490, #4fc3e0);
		--nature-jurisprudence: light-dark(#a21caf, #e08af0);

		/* Typographie */
		--police: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--police-titres: var(--police);
		--police-mono: ui-monospace, Menlo, Consolas, monospace;
		--police-texte: var(--police);                  /* corps des textes juridiques (lois, décisions, amendements) */
		--taille: 16px;                                 /* base : tout le reste est en rem/em */
		--interligne: 1.5;
		--interligne-titres: 1.25;
		--interligne-texte: 1.65;                       /* lecture longue */
		--taille-petite: .85rem;
		--taille-tableau: .93rem;
		--taille-logo: 1.1rem;
		--taille-h1: 1.75rem;                           /* titre de page */
		--taille-h2: 1.15rem;
		--taille-h3: 1rem;
		--taille-chiffre: 2rem;                         /* chiffres clés (indicateurs, tableau de bord) */
		--graisse-forte: 500;                           /* libellés, en-têtes de tableau, navigation, boutons */
		--graisse-chiffre: 600;
		--graisse-titres: 700;                          /* titres en gras */
		--approche-titres: -.015em;                     /* espacement des lettres des titres */

		/* Espacements (échelle) */
		--e1: .25rem;
		--e2: .5rem;
		--e3: .75rem;
		--e4: 1.25rem;
		--e5: 2rem;

		/* Formes et mise en page */
		--rayon: 6px;                                   /* champs, boutons, messages */
		--rayon-petit: 4px;                             /* code, petites marques */
		--rayon-grand: 10px;                            /* cartes : listes, chiffres clés, barre de filtres */
		--rayon-pastille: 999px;
		--bordure: 1px;
		--bordure-forte: 3px;                           /* graphiques (repères) */
		--largeur-page: 1120px;
		--hauteur-entete: 3.5rem;
		--hauteur-logo: 1.75rem;                        /* image du logo dans l'en-tête */
		--largeur-formulaire: 420px;
		--hauteur-champ: 2.25rem;                       /* champs, listes et boutons alignés sur une même ligne */
		--hauteur-barre: 1.25rem;                       /* barre de répartition */
		--hauteur-barre-mini: .6rem;                    /* barre de répartition dans une cellule de tableau */
		--largeur-hemicycle: 640px;
		--ecart-graphique: 2px;                         /* espace (couleur du fond) entre deux segments ou deux sièges */
		--gouttiere: 16px;
		--contour-focus: 2px solid var(--accent);
		--anneau-focus: 0 0 0 3px var(--accent-fond);   /* champ actif : anneau net, sans flou */
		--ombre: 0 2px 10px light-dark(rgb(0 0 0 / .14), rgb(0 0 0 / .55));        /* carte en édition, barre flottante */
		--ombre-forte: 0 14px 34px light-dark(rgb(0 0 0 / .22), rgb(0 0 0 / .7));  /* élément soulevé pendant un glisser-déposer */
		--fond-page: var(--fond);                       /* fond de la fenêtre (html) ; un thème « cartes » le distingue de --fond (panneaux) */
		--fond-entete: var(--fond-page);                /* en-tête collant, peint sur toute la largeur de la fenêtre */

		/* Mouvement (mouvement.css) : jamais de durée en dur ailleurs ; tout est sous prefers-reduced-motion: no-preference. */
		--duree-rapide: 120ms;                          /* survol, pression, couleur de lien, champ au focus */
		--duree: 200ms;                                 /* ouverture de menu, dialogue, message, transition de vue */
		--duree-lente: 250ms;                           /* contenu htmx inséré, barres et chiffres clés */
		--duree-progres: 3s;                            /* barre de progression htmx : atteint 85 % puis reste (pas de boucle) */
		--delai-progres: 150ms;                         /* la barre n'apparaît qu'au-delà de ce délai (pas de clignotement) */
		--decalage-liste: 40ms;                         /* décalage entre deux cartes ou barres successives */
		--mouvement-deplacement: 6px;                   /* amplitude verticale d'une entrée (jamais de layout) */
		--courbe: cubic-bezier(.2, 0, 0, 1);            /* ease-out sobre */
		--courbe-entree: cubic-bezier(.22, 1, .36, 1);  /* entrée : décélération douce */
	}

	:root[data-schema="clair"] { color-scheme: light; }
	:root[data-schema="sombre"] { color-scheme: dark; }
}