:root {
    /* Couleurs principales */
    --color-primary: #3772b4;
    --color-primary-dark: #2d5f96;
    --color-primary-light: #4a8fd4;

    /* Palette Slate */
    --color-slate-900: #0f172a;
    --color-slate-800: #1e293b;
    --color-slate-700: #334155;
    --color-slate-600: #475569;
    --color-slate-500: #64748b;
    --color-slate-400: #94a3b8;
    --color-slate-300: #cbd5e1;
    --color-slate-200: #e2e8f0;
    --color-slate-100: #f1f5f9;
    --color-slate-50: #f8fafc;

    /* Backgrounds */
    --color-bg: #f8fafc;
    --color-bg-alt: #f1f5f9;
    --color-surface: #FFFFFF;

    /* Texte */
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;

    /* Bordures */
    --color-border: #e2e8f0;

    /* Couleurs secondaires */
    --color-secondary: #94a3b8;
    --color-secondary-dark: #64748b;
    --color-danger: #dc3545;
    --color-danger-dark: #c82333;
    --color-danger-darker: #bd2130;
    --color-warning-alt: #d9a406;
    --color-success-alt: #1e7e34;
    --color-purple: #6f42c1;
    --color-error: #ef4444;
    --color-success: #10B981;
    --color-warning: #f59e0b;

    /* Soft backgrounds (badges, alertes) */
    --color-success-bg: #ecfdf5;
    --color-error-bg: #fef2f2;
    --color-warning-bg: #fffbeb;
    --color-info-bg: #eff6ff;
    --color-purple-bg: #f5f3ff;

    /* Opacites - primary */
    --color-primary-a4: rgba(55, 114, 180, 0.04);
    --color-primary-a6: rgba(55, 114, 180, 0.06);
    --color-primary-a8: rgba(55, 114, 180, 0.08);
    --color-primary-a10: rgba(55, 114, 180, 0.1);
    --color-primary-a12: rgba(55, 114, 180, 0.12);
    --color-primary-a20: rgba(55, 114, 180, 0.2);

    /* Opacites - text-main (dark) */
    --color-dark-a4: rgba(15, 23, 42, 0.04);
    --color-dark-a6: rgba(15, 23, 42, 0.06);
    --color-dark-a12: rgba(15, 23, 42, 0.12);
    --color-dark-a15: rgba(15, 23, 42, 0.15);

    /* Opacites - danger */
    --color-danger-a8: rgba(220, 53, 69, 0.08);
    --color-danger-a10: rgba(220, 53, 69, 0.1);
    --color-danger-a12: rgba(220, 53, 69, 0.12);
    --color-danger-a20: rgba(220, 53, 69, 0.2);
    --color-danger-a25: rgba(220, 53, 69, 0.25);
    --color-danger-a35: rgba(220, 53, 69, 0.35);

    /* Opacites - warning-alt */
    --color-warning-alt-a8: rgba(217, 164, 6, 0.08);
    --color-warning-alt-a10: rgba(217, 164, 6, 0.1);
    --color-warning-alt-a12: rgba(217, 164, 6, 0.12);
    --color-warning-alt-a20: rgba(217, 164, 6, 0.2);

    /* Opacites - success-alt */
    --color-success-alt-a8: rgba(30, 126, 52, 0.08);
    --color-success-alt-a10: rgba(30, 126, 52, 0.1);
    --color-success-alt-a12: rgba(30, 126, 52, 0.12);
    --color-success-alt-a20: rgba(30, 126, 52, 0.2);

    /* Opacites - purple */
    --color-purple-a12: rgba(111, 66, 193, 0.12);

    /* Opacites - overlay */
    --overlay-light-95: rgba(255, 255, 255, 0.95);
    --overlay-light-90: rgba(255, 255, 255, 0.9);
    --overlay-light-50: rgba(255, 255, 255, 0.5);
    --overlay-light-30: rgba(255, 255, 255, 0.3);
    --overlay-light-10: rgba(255, 255, 255, 0.1);
    --overlay-light-6: rgba(255, 255, 255, 0.06);
    --overlay-dark-50: rgba(0, 0, 0, 0.5);
    --overlay-dark-15: rgba(0, 0, 0, 0.15);
    --overlay-dark-4: rgba(0, 0, 0, 0.04);

    /* Gradients */
    --gradient-sidebar: linear-gradient(180deg, #0f172a 0%, #1e293b 100%);
    --gradient-primary: linear-gradient(135deg, #3772b4 0%, #2d5f96 100%);

    /* Typographie */
    --font-display: 'Inter', sans-serif;
    --font-body: 'Inter', sans-serif;

    /* Échelle typographique (base 16px, ratio 1.25 - Major Third) */
    /* 10 tailles maximum pour une cohérence optimale */
    --font-size-xs: 0.75rem;        /* 12px - Labels, badges, métadonnées */
    --font-size-sm: 0.875rem;       /* 14px - Texte secondaire, descriptions */
    --font-size-base: 1rem;         /* 16px - Texte de base */
    --font-size-md: 1.125rem;       /* 18px - Texte légèrement accentué */
    --font-size-lg: 1.25rem;        /* 20px - Titres de cartes (h3) */
    --font-size-xl: 1.5rem;         /* 24px - Titres de sections (h2), page header (h1) */
    --font-size-2xl: 1.875rem;      /* 30px - Stats, KPIs, grandes valeurs */
    --font-size-3xl: 2.25rem;       /* 36px - Grands titres spéciaux */
    --font-size-4xl: 3rem;          /* 48px - Très grands titres (dashboard stats) */

    /* Line heights correspondants */
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* Rayons */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-btn: 10px;
    --radius-badge: 20px;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 4px rgba(15, 23, 42, 0.06);
    --shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 6px rgba(15, 23, 42, 0.04), 0 10px 24px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 10px 15px rgba(15, 23, 42, 0.04), 0 20px 40px rgba(15, 23, 42, 0.1);
    --shadow-xl: 0 20px 25px rgba(15, 23, 42, 0.06), 0 40px 60px rgba(15, 23, 42, 0.12);

    /* Transitions */
    --ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
    --ease-material: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-default: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /* Dimensions layout */
    --sidebar-width: 260px;
    --topbar-height: 60px;

    /* Spacing Scale (8px base system) */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 40px;
    --spacing-3xl: 48px;

    /* Component Spacing */
    --padding-card: var(--spacing-lg);           /* 24px */
    --padding-button: var(--spacing-sm) var(--spacing-md);  /* 8px 16px */
    --padding-input: var(--spacing-sm) var(--spacing-md);   /* 8px 16px */
    --gap-grid: var(--spacing-lg);               /* 24px */
    --gap-section: var(--spacing-md);            /* 16px */
}

/* Reset global : police Inter partout (sauf icônes) */
body, input, textarea, select, button {
    font-family: 'Inter', sans-serif;
}