/* Design tokens : variables de couleur et de theme pour tout l'admin. */

:root {
    /* Palette reduite a 6 couleurs semantiques. Toute couleur d'accent,
       badge ou icone doit venir d'ici -- ne pas introduire de nouveau hex
       ailleurs, mapper sur la couleur la plus proche.
       Primaire : indigo-violet affine (plus sature que l'indigo Tailwind
       standard). Neutres : echelle zinc (gris pur, sans teinte bleutee). */
    --primary: #5b5bf0;
    --primary-rgb: 91, 91, 240;
    --primary-dark: #4640d6;
    --primary-dark-rgb: 70, 64, 214;
    --primary-light: #8f8ff5;
    --primary-light-rgb: 143, 143, 245;
    --danger: #ef4444;
    --danger-rgb: 239, 68, 68;
    --danger-hover: #dc2626;
    --success: #10b981;
    --success-rgb: 16, 185, 129;
    --warning: #f59e0b;
    --warning-rgb: 245, 158, 11;
    --info: #3b82f6;
    --info-rgb: 59, 130, 246;
    --accent: #d946ef;
    --accent-rgb: 217, 70, 239;

    --bg-main: #eef0f3;
    --sidebar-bg: #ffffff;
    --text-main: #18181b;
    --text-muted: #63636b;
    --border: #d4d4d9;
    --card-bg: #ffffff;
    --sidebar-width: 280px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --primary-hover: #4640d6;
    --bg-sidebar: #eef0f3;
    --sidebar-active: rgba(91, 91, 240, 0.08);
    --header-bg: #ffffff;
    --shadow-sm: 0 1px 3px rgba(24, 24, 27, 0.06);
    --shadow-md: 0 4px 12px rgba(24, 24, 27, 0.08);

    /* Echelle de radius : multiplicateur applique a tous les border-radius
       via calc(Npx * var(--radius-scale)). Pilote par data-radius sur <html>. */
    --radius-scale: 1;
}

[data-theme="dark"] {
    --bg-main: #09090b;
    --sidebar-bg: #18181b;
    --text-main: #fafafa;
    --text-muted: #a1a1aa;
    --border: #27272a;
    --card-bg: #18181b;
    --bg-sidebar: #18181b;
    --sidebar-active: rgba(167, 139, 250, 0.18);
    --header-bg: #09090b;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.4);

    /* Chaque couleur semantique est reprise, eclaircie, pour garder assez de
       contraste/saturation percue sur fond sombre (les teintes "light mode"
       parraissent ternes/sombres une fois posees sur un fond quasi-noir). */
    --primary: #a78bfa;
    --primary-rgb: 167, 139, 250;
    --primary-dark: #8b5cf6;
    --primary-dark-rgb: 139, 92, 246;
    --primary-light: #c4b5fd;
    --primary-light-rgb: 196, 181, 253;
    --primary-hover: #a78bfa;
    --danger: #f87171;
    --danger-rgb: 248, 113, 113;
    --danger-hover: #fca5a5;
    --success: #34d399;
    --success-rgb: 52, 211, 153;
    --warning: #fbbf24;
    --warning-rgb: 251, 191, 36;
    --info: #2dd4bf;
    --info-rgb: 45, 212, 191;
    --accent: #e879f9;
    --accent-rgb: 232, 121, 249;
}

/* Echelle de radius, du plus carre au plus arrondi. "medium" = defaut historique. */
[data-radius="none"] { --radius-scale: 0; }
[data-radius="subtle"] { --radius-scale: 0.4; }
[data-radius="medium"] { --radius-scale: 1; }
[data-radius="large"] { --radius-scale: 1.6; }

/* Empeche le flash de contenu non stylise avant chargement du theme */
html[data-theme="dark"] {
    background-color: #09090b;
}

html[data-theme="light"] {
    background-color: #eef0f3;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Outfit', sans-serif;
    background-color: var(--bg-main);
    color: var(--text-main);
    display: flex;
    min-height: 100vh;
}

.theme-transition body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

.theme-transition * {
    transition: border-radius 0.2s ease;
}