/* ===== Design tokens communs à toutes les applications ===== */

:root {
    /* Base rem : 1rem = 16px (html { font-size: 100% } dans reset.css) */
    /* Couleurs d'état */
    --color-success: #035E1D;
    --color-success-rgb: 3, 94, 29; /* canaux RGB de --color-success (#035E1D) pour rgba() à opacité variable */
    --color-success2: #047D26;
    --color-error: #B90000;
    --color-error-rgb: 185, 0, 0; /* canaux RGB de --color-error (#B90000) pour rgba() à opacité variable */
    --color-warning: #f5a623;
    --color-warning-bg: #fff3e0;
    --color-info-bg: var(--color-primary-light);
    --color-danger: var(--color-error);
    --color-error-bg: #fee;
    --color-error-bg-subtle: #FDECEC; /* fond d'alerte erreur : rouge très clair (opaque) */
    /* Couleurs neutres */
    --color-text-primary: #333;
    --color-text-secondary: #666;
    --color-text-muted: #6c757d;
    --color-text-dark: #000;
    --color-border: #e0e0e0;
    /*--color-bg-light: #f8f9fa;*/
    --color-bg-light: #F7F7F7;
    --color-bg-hover: #e9ecef;
    --color-bg-hover-light: #f0f0f0;
    --color-white: #fff;
    --color-white-rgb: 255, 255, 255; /* canaux RGB de --color-white pour rgba() à opacité variable (voiles, séparateurs sur fond sombre) */
    --color-footer-copyright: #CCCCCC;
    --color-disabled: #666;
    --color-disabled-border: #999;
    /* Espacements — échelle complète triée du plus petit au plus grand (1rem = 16px).
       Note sur les suffixes : les noms historiques (xs/xs2/xs3/xs4, sm/sm2/sm3…) ont été conservés
       tels quels pour compatibilité ascendante ; seul l'ordre dans ce fichier a été corrigé. */
    --spacing-4xs: 0.25rem; /*  4px   — padding vertical bouton compact .form__file-picker-btn (spec Figma) */
    --spacing-xs3: 0.4rem; /*  6.4px — micro : gap icône inline, offset visuel fin */
    --spacing-xs: 0.5rem; /*  8px   — xsmall */
    --spacing-xs4: 0.6rem; /*  9.6px — tiny  : gap label/hint, tooltip dense */
    --spacing-xs5: 0.7rem; /* 11.2px — gap boutons de modale, padding puce d'erreur */
    --spacing-xs2: 0.8rem; /* 12.8px — gap compact */
    --spacing-xs8: 0.75rem; /* 12px   — padding horizontal .form__file-picker (spec Figma) */
    --spacing-xs7: 0.8125rem; /* 13px — padding vertical trigger .form__data-protection (spec Figma) */
    --spacing-xs6: 0.9rem; /* 14.4px — offset bouton × des modales, padding listes de règles */
    --spacing-sm: 1rem; /* 16px   — small */
    --spacing-sm4: 1.1rem; /* 17.6px — padding modale mobile (--modal-padding-sm) */
    --spacing-sm2: 1.2rem; /* 19.2px — margin interne, gap medium-small */
    --spacing-sm3: 1.4rem; /* 22.4px — padding trigger/bouton dense, padding modale (--modal-padding) */
    --spacing-md: 1.5rem; /* 24px   — medium */
    --spacing-md2: 1.6rem; /* 25.6px — padding mobile, gap layout */
    --spacing-md4: 1.7rem; /* 27.2px — padding latéral des corps/pieds de modales d'alerte */
    --spacing-md3: 1.8rem; /* 28.8px — padding carte corps, espacement confort */
    --spacing-lg: 2rem; /* 32px   — large */
    --spacing-lg2: 2.4rem; /* 38.4px — padding card, gap sections */
    --spacing-xl: 3rem; /* 48px   — xlarge */
    --spacing-xl3: 3.2rem; /* 51.2px — marge titre principal */
    --spacing-xl4: 3.6rem; /* 57.6px — padding auth tablette */
    --spacing-xxl: 4rem; /* 64px   — xxlarge */
    --spacing-xl2: 4.8rem; /* 76.8px — gap layout desktop */
    --spacing-xl5: 6rem; /* 96px   — padding auth grand écran */
    /* Typographie */
    --font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --font-family-semibold: var(--font-family-base); /* alias : même pile que la base (le semi-gras vient de --font-weight-semibold) */
    --font-size-xs: 1.2rem;
    --font-size-sm: 1.3rem;
    --font-size-base: 1.4rem;
    --font-size-md: 1.5rem;
    --font-size-lg: 1.6rem;
    --font-size-xl: 2rem; /* 32px — titres de page sur mobile (≤ 620 px), aligné sur .page-card__title (page-card.css) */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    /* Interlignages */
    --line-height-tight: 1.3; /* titres */
    --line-height-snug: 1.4; /* libellés, boutons, textes courts */
    --line-height-base: 1.5; /* texte courant (body) */
    --line-height-relaxed: 1.6; /* paragraphes longs, contenu CMS */
    /* Rayons de bordure */
    --border-radius-xs: 0.2rem; /* anneau de focus des liens/boutons texte */
    --border-radius-sm: 0.3rem;
    --border-radius-md: 0.5rem;
    --border-radius-lg: 0.8rem;
    /* Largeur de bordure — 1px exact (1rem = 16px). Distinct des « 0.1rem » historiques
       (1.6px, imprécis mais déjà répandus) : à utiliser pour tout nouveau 1px pixel-perfect. */
    --border-width-thin: 0.0625rem;
    /* Ombres */
    --shadow-md: 0 0.4rem 0.8rem rgba(0, 0, 0, 0.1), 0 0.6rem 2rem rgba(0, 0, 0, 0.1);
    --shadow-dropdown: 0 0.8rem 3rem rgba(0, 0, 0, 0.16), 0 0 0 0.1rem rgba(0, 0, 0, 0.06); /* menus déroulants du header */
    --shadow-drawer: -0.4rem 0 2rem rgba(0, 0, 0, 0.15); /* panneau latéral du menu mobile */
    /* Overlays */
    --color-overlay-bg: rgba(0, 0, 0, 0.5); /* fond semi-transparent des modales et du menu mobile (Default/layout/header.css) */
    /* Transitions */
    --transition-quick: 0.15s ease; /* micro-interactions (survol de puces, chips) */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    /* Mise en page */
    --content-max-width: 180rem; /* largeur max du contenu centré (anti-ultrawide) ; 1rem = 16px => 2880px */
    --layout-gutter-x: var(--spacing-lg); /* gutter latéral desktop (= 4rem / 64px) — aligne le contenu des pages avec le header */
    --layout-gutter-x-sm: var(--spacing-md2); /* gutter latéral mobile (= 1.6rem / 25.6px, ≤ 620 px) */
    --control-height: 2.75rem; /* 44px — hauteur standard des champs/boutons (.btn, .form-control, .form__file-picker) : seuil tactile WCAG 2.5.5 */
    --control-height-sm: 1.75rem; /* 28px — bouton compact (spec Figma), ex. .form__file-picker-btn */
    /* Z-index */
    --z-index-dropdown: 50;
    --z-index-sticky: 100;
    --z-index-modal: 200;
}