/*
 * Tokens du design system DPI.
 * Toute couleur, ombre, rayon ou espacement de l'application passe par ces variables.
 * Thème clair par défaut ; le thème sombre s'active uniquement par choix de l'utilisateur (data-theme="dark").
 */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable.woff2") format("woff2");
}

@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/InterVariable-Italic.woff2") format("woff2");
}

:root {
    color-scheme: light;

    /* Surfaces : blanc cassé chaud, « papier clinique » */
    --color-bg: #fafaf8;
    --color-surface: #ffffff;
    --color-surface-subtle: #f5f4f0;
    --color-surface-sunken: #efeee9;
    --color-surface-hover: #f2f1ec;
    --color-overlay: rgb(28 27 25 / 0.32);

    --color-border: #e7e5df;
    --color-border-strong: #d4d1c8;

    --color-text: #1c1b19;
    --color-text-muted: #5f5c55;
    --color-text-subtle: #8a867d;
    --color-text-inverse: #ffffff;

    /* Accent : vert profond */
    --color-accent: #085143;

    /* Graphiques : deux séries distinguables aussi par les daltoniens (paire validée sur la surface claire). */
    --chart-1: #008a7c;
    --chart-2: #8f63d2;
    --color-accent-hover: #063d33;
    --color-accent-soft: #dcefe9;
    --color-accent-text: #085143;
    --color-on-accent: #ffffff;

    /* Couleur tonique : vert citron, rare (entrée active du menu), toujours en fond avec un texte foncé. */
    --color-tonic: #c2ff06;
    --color-on-tonic: #0a3329;

    /* Sémantique : réservée au sens, jamais décorative */
    --color-danger: #c42b1c;
    --color-danger-soft: #fdecea;
    --color-danger-text: #912018;
    --color-warning: #c25a00;
    --color-warning-soft: #fef3e2;
    --color-warning-text: #93370d;
    --color-success: #13854f;
    --color-success-soft: #e0f4e8;
    --color-success-text: #17643e;
    --color-info: #1b6cc2;
    --color-info-soft: #e3effc;
    --color-info-text: #194d80;

    --focus-ring: 0 0 0 3px rgb(8 81 67 / 0.3);

    /* Panneau de marque (page de connexion) */
    --color-brand-1: #0d6b58;
    --color-brand-2: #085143;
    --color-brand-3: #053a30;
    --color-brand-text: #eaf6f4;

    /* Toasts : toujours foncés, dans les deux thèmes */
    --color-toast-bg: #1f1e1c;
    --color-toast-fg: #f5f4f0;
    --color-toast-border: transparent;

    /* Palette des équipes : 8 teintes douces, contraste AA entre fond et texte */
    --team-1-bg: #dcf3ef; --team-1-fg: #0b7a72;   /* sarcelle */
    --team-2-bg: #e4e7fd; --team-2-fg: #3b46c4;   /* indigo */
    --team-3-bg: #f6e1f3; --team-3-fg: #9b2d8a;   /* prune */
    --team-4-bg: #fce4ef; --team-4-fg: #b0265f;   /* framboise (distinct du rouge « danger ») */
    --team-5-bg: #fdefd3; --team-5-fg: #985700;   /* ambre */
    --team-6-bg: #e3f3d8; --team-6-fg: #3d7a1b;   /* olive */
    --team-7-bg: #dfeefb; --team-7-fg: #1d68a8;   /* bleu ardoise */
    --team-8-bg: #fbe6d9; --team-8-fg: #ac4c19;   /* terre cuite */
    --team-9-bg: #daf0f6; --team-9-fg: #0b6f8c;   /* bleu pétrole */
    --team-10-bg: #ece5fb; --team-10-fg: #6740b8;  /* violet */
    --team-11-bg: #f3efcc; --team-11-fg: #6f6100;  /* moutarde */
    --team-12-bg: #e6eaee; --team-12-fg: #46566a;  /* ardoise */

    /* Typographie */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
    --text-xs: 0.75rem;
    --text-sm: 0.8125rem;
    --text-base: 0.875rem;
    --text-md: 0.9375rem;
    --text-lg: 1.0625rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --leading-tight: 1.3;
    --leading-normal: 1.5;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --tracking-tight: -0.006em;
    --tracking-display: -0.012em;

    /* Espacements (échelle de 4 px) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-16: 4rem;

    /* Densité « confortable » par défaut */
    --control-height: 2.25rem;
    --control-height-sm: 1.875rem;
    --control-padding-x: 0.75rem;
    --row-padding-y: 0.75rem;

    /* Rayons, bordures, ombres */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 999px;
    --shadow-xs: 0 1px 2px rgb(28 27 25 / 0.05);
    --shadow-sm: 0 1px 2px rgb(28 27 25 / 0.04), 0 1px 3px rgb(28 27 25 / 0.04);
    --shadow-md: 0 2px 4px rgb(28 27 25 / 0.04), 0 8px 24px -6px rgb(28 27 25 / 0.10);
    --shadow-lg: 0 4px 8px rgb(28 27 25 / 0.04), 0 24px 56px -12px rgb(28 27 25 / 0.22);

    /* Mouvement */
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --duration-fast: 120ms;
    --duration: 180ms;
    --duration-slow: 260ms;

    /* Gabarit */
    --rail-width: 64px;
    --topbar-height: 56px;
    --content-max-width: 1440px;
}

:root[data-density="compact"] {
    --control-height: 2rem;
    --control-height-sm: 1.75rem;
    --control-padding-x: 0.625rem;
    --row-padding-y: 0.5rem;
}

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

    --color-bg: #121211;
    --color-surface: #1a1a18;
    --color-surface-subtle: #20201e;
    --color-surface-sunken: #161615;
    --color-surface-hover: #252523;
    --color-overlay: rgb(0 0 0 / 0.55);

    --color-border: #2c2b28;
    --color-border-strong: #3b3a36;

    --color-text: #ecebe6;
    --color-text-muted: #aeaaa1;
    --color-text-subtle: #807c74;
    --color-text-inverse: #121211;

    --color-accent: #4cc3a3;
    --chart-1: #2aa89c;
    --chart-2: #9670e6;
    --color-accent-hover: #6fd0b5;
    --color-accent-soft: rgb(76 195 163 / 0.15);
    --color-accent-text: #8fdcc6;
    --color-on-accent: #062a22;

    --color-danger: #f0776c;
    --color-danger-soft: rgb(240 119 108 / 0.14);
    --color-danger-text: #f6a39b;
    --color-warning: #f2a54a;
    --color-warning-soft: rgb(242 165 74 / 0.14);
    --color-warning-text: #f7c283;
    --color-success: #5fc28d;
    --color-success-soft: rgb(95 194 141 / 0.14);
    --color-success-text: #8dd6ae;
    --color-info: #75a9e0;
    --color-info-soft: rgb(117 169 224 / 0.14);
    --color-info-text: #a3c6ec;

    --focus-ring: 0 0 0 3px rgb(76 195 163 / 0.35);
    --color-toast-bg: #2a2927;
    --color-toast-border: #3b3a36;

    --team-1-bg: rgb(60 198 184 / 0.17);  --team-1-fg: #7fe0d5;
    --team-2-bg: rgb(129 140 230 / 0.16); --team-2-fg: #aeb6f0;
    --team-3-bg: rgb(201 120 190 / 0.16); --team-3-fg: #deabd6;
    --team-4-bg: rgb(236 110 165 / 0.16); --team-4-fg: #f3a6c9;
    --team-5-bg: rgb(226 168 70 / 0.16);  --team-5-fg: #ecc685;
    --team-6-bg: rgb(150 190 90 / 0.16);  --team-6-fg: #bcd796;
    --team-7-bg: rgb(110 160 205 / 0.16); --team-7-fg: #a8c8e4;
    --team-8-bg: rgb(214 140 100 / 0.16); --team-8-fg: #e6b598;
    --team-9-bg: rgb(80 170 205 / 0.16);  --team-9-fg: #94cfe4;
    --team-10-bg: rgb(150 120 225 / 0.17); --team-10-fg: #c2affa;
    --team-11-bg: rgb(200 185 70 / 0.16); --team-11-fg: #ddd28a;
    --team-12-bg: rgb(150 165 185 / 0.16); --team-12-fg: #bcc6d3;

    --shadow-xs: 0 1px 2px rgb(0 0 0 / 0.3);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3), 0 1px 3px rgb(0 0 0 / 0.2);
    --shadow-md: 0 2px 4px rgb(0 0 0 / 0.3), 0 8px 24px -6px rgb(0 0 0 / 0.45);
    --shadow-lg: 0 4px 8px rgb(0 0 0 / 0.3), 0 24px 56px -12px rgb(0 0 0 / 0.6);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --duration-fast: 0ms;
        --duration: 0ms;
        --duration-slow: 0ms;
    }
}