/* ==================================================================
   Jetons de design Cobalt
   Seule source des couleurs, tailles, espacements, rayons et ombres.
   Chargé par le thème, l'application et la page de connexion.
   Les composants n'écrivent jamais une valeur en dur : ils lisent
   ces variables. Pour changer l'identité, on change ce fichier.

   Seuils d'écran (non exprimables en variable CSS) :
     900px  menu latéral → tiroir
     640px  formulaires sur une colonne, fenêtres en feuille basse
   ================================================================== */

:root {
	/* --- Charte ---------------------------------------------------- */
	--cb-cobalt: #001D80;      /* bleu cobalt */
	--cb-marine: #1C3D73;      /* bleu marine */
	--cb-azur: #3871B6;
	--cb-nuit: #171828;
	--cb-creme: #FAF4B8;       /* couleur du logo */
	--cb-or: #E2A71B;
	--cb-rose: #CC5378;
	--cb-violet: #582D81;
	--cb-rouge: #931F21;
	--cb-vert: #235C3C;
	--cb-brun: #4F3319;
	--cb-gris: #8C8E9E;

	/* Fonds pâles associés (pastilles, sélection, alertes) */
	--cb-cobalt-pale: #E3E7F5;
	--cb-azur-pale: #E5EEF8;
	--cb-or-pale: #FBF1D9;
	--cb-rose-pale: #F8E5EB;
	--cb-violet-pale: #ECE5F3;
	--cb-rouge-pale: #F6E2E2;
	--cb-vert-pale: #E2EEE7;
	--cb-brun-pale: #EFE8E1;
	--cb-gris-pale: #EEEDE6;
	--cb-creme-pale: #FDF9DD;

	/* L'or est trop clair pour un trait sur blanc (2,1:1) : version foncée
	   pour les bordures et contours qui doivent rester lisibles (3,9:1). */
	--cb-or-fonce: #A87A10;

	/* --- Surfaces & textes ----------------------------------------- */
	--cb-bg: #F6F4EA;          /* fond de page */
	--cb-surface: #FFFFFF;     /* cartes, champs */
	--cb-surface-2: #FBF9EF;   /* lignes, survols, pieds de fenêtre */
	--cb-surface-3: #ECEADF;   /* rails : onglets, barres de progression */
	--cb-line: #E4E0CC;        /* séparateurs décoratifs */
	--cb-line-strong: #CFC9AE; /* séparateurs marqués */
	--cb-field-border: #8E8A74;/* bord des champs : 3,3:1 minimum */
	--cb-ink: #171828;         /* texte principal */
	--cb-ink-2: #4A4C61;       /* texte secondaire */
	--cb-ink-3: #62647A;       /* aides, dates, notes : 4,7:1 minimum */
	--cb-on-dark: #FFFFFF;     /* texte sur fond foncé (info-bulle, notification) */

	/* --- Rôles (à utiliser de préférence aux couleurs de charte) --- */
	--cb-accent: var(--cb-cobalt);
	--cb-accent-hover: var(--cb-marine);
	--cb-accent-pale: var(--cb-cobalt-pale);
	--cb-on-accent: var(--cb-creme);
	--cb-success: var(--cb-vert);
	--cb-success-pale: var(--cb-vert-pale);
	--cb-warning: var(--cb-or);
	--cb-warning-pale: var(--cb-or-pale);
	--cb-danger: var(--cb-rouge);
	--cb-danger-pale: var(--cb-rouge-pale);
	--cb-danger-line: #EBC9C9;
	--cb-danger-on-dark: #FFB4A8; /* erreur sur fond cobalt */
	--cb-info: var(--cb-azur);
	--cb-info-pale: var(--cb-azur-pale);
	--cb-highlight: var(--cb-creme-pale);
	--cb-highlight-line: #EFE4A4;

	/* Contour de focus : cobalt sur fond clair, crème sur fond cobalt */
	--cb-focus: var(--cb-cobalt);
	--cb-focus-on-dark: var(--cb-creme);
	--cb-focus-ring: 0 0 0 3px rgba(0, 29, 128, .16);

	/* Graphiques */
	--cb-chart-1: var(--cb-azur);
	--cb-chart-2: var(--cb-rose);
	--cb-chart-3: var(--cb-cobalt);

	/* --- Typographie ----------------------------------------------- */
	--cb-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--cb-display: "Youth Energy", "Arial Narrow", system-ui, sans-serif;
	--cb-mono: ui-monospace, Menlo, Consolas, monospace;

	--cb-text-xs: 12px;        /* étiquettes, pastilles, petites notes */
	--cb-text-sm: 13px;        /* aides, méta-données, sous-titres */
	--cb-text-md: 14px;        /* boutons, tableaux, contrôles */
	--cb-text-base: 15px;      /* texte courant */
	--cb-text-lg: 16px;        /* titres de carte, montants */
	--cb-text-xl: 19px;        /* titres de fenêtre */
	--cb-text-2xl: 24px;       /* chiffres et titres en Youth Energy */
	--cb-text-3xl: 30px;       /* indicateurs */
	--cb-text-display: clamp(30px, 4vw, 42px); /* titre de page */

	--cb-weight-regular: 400;
	--cb-weight-medium: 500;
	--cb-weight-semibold: 600;
	--cb-weight-bold: 700;

	--cb-leading: 1.5;
	--cb-leading-tight: 1.2;
	--cb-tracking-caps: .08em; /* petits titres en capitales */

	/* --- Espacements (échelle de 4) -------------------------------- */
	--cb-space-1: 4px;
	--cb-space-2: 8px;
	--cb-space-3: 12px;
	--cb-space-4: 16px;
	--cb-space-5: 20px;
	--cb-space-6: 24px;
	--cb-space-7: 32px;
	--cb-space-8: 48px;

	/* --- Formes ---------------------------------------------------- */
	--cb-radius-sm: 8px;       /* champs, lignes, badges */
	--cb-radius: 14px;         /* cartes, encadrés */
	--cb-radius-lg: 20px;      /* fenêtres */
	--cb-radius-pill: 999px;   /* boutons, pastilles */

	--cb-shadow-sm: 0 1px 3px rgba(23, 24, 40, .12);
	--cb-shadow: 0 1px 2px rgba(23, 24, 40, .06), 0 6px 18px rgba(23, 24, 40, .06);
	--cb-shadow-lg: 0 16px 48px rgba(23, 24, 40, .28);
	--cb-overlay: rgba(23, 24, 40, .5);

	/* --- Contrôles ------------------------------------------------- */
	--cb-control-h: 40px;      /* boutons, champs */
	--cb-control-h-sm: 34px;   /* variantes compactes */
	--cb-touch: 44px;          /* zone tactile minimale au doigt */

	--cb-fast: .15s;
	--cb-ease: ease-out;

	--cb-side-w: 248px;
}