@layer base {
    :root {
        /* Marque & état */
        --brand: #E11D48;
        --brand-contrast: #ffffff;
        --success: #16a34a;
        --danger: #dc2626;
        --link: #1d4ed8;

        /* Couleurs de base */
        --text: #0f172a;
        --muted: #475569;
        --surface: #ffffff;
        --surface-subtle: #F8FAFC;
        --surface-info: #EEF2FF;
        --surface-warn: #FEE2E2;

        /* Traits */
        --border: rgba(15, 23, 42, .12);
        --hairline: 1px solid rgba(15, 23, 42, .08);

        /* Header (bandeau) */
        --header-h: 56px;
        --header-bg: #d50000;
        --header-fg: #ffffff;

        /* Ombres & rayons */
        --radius: 12px;
        --radius-lg: 16px;
        --shadow-sm: 0 6px 16px rgba(0, 0, 0, .12);
        --shadow-md: 0 12px 30px rgba(0, 0, 0, .18);
        --shadow-lg: 0 24px 48px rgba(0, 0, 0, .18);

        /* Fonts */
        --font-ui: Roboto, system-ui, -apple-system, "Segoe UI",
            "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
        --font-display: var(--font-ui);
        /* mêmes polices pour les titres */
        /* --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
        --font-display: "Teko", var(--font-ui); */
        /* --font-ui: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", sans-serif;
        --font-display: "Rajdhani", var(--font-ui); */

        /* Typo & échelles */
        --font-s: 12px;
        --font-m: 14px;
        --font-l: 16px;
        --font-xl: 20px;
        --font-2xl: 24px;

        /* Espaces */
        --space-1: 4px;
        --space-2: 8px;
        --space-3: 12px;
        --space-4: 16px;
        --space-5: 20px;
        --space-6: 24px;
        --space-8: 32px;

        /* Layout */
        --container-max: 1120px;

        /* Fond de page — UNIFIÉ pour tout le site */
        --bg: #f4f7fb;

        /* Accents Dashboard (utilisés par certaines cartes) */
        --accent-blue-aa: #4978b6;
        --accent-green-aa: #26865e;
        --accent-yellow-aa: #a56a00;
        --accent-pink-aa: #b50e46;
        --accent-purple-aa: #7E57C2;

        /* Easing générique */
        --ease: cubic-bezier(.2, .8, .2, 1);
    }

    html {
        color-scheme: light;
    }
}