:root {
    /* Palette principale à 3 couleurs */
    --primary-color: #600fe5;         /* Bleu principal */
    --primary-dark: #36047d;

    --secondary-color: #00729e;       /* Bleu canard/vert */
    --secondary-dark: #004291;

    --complementary-color: #fd5962;  /* Orange */
    --complementary-dark: #fd0f61;

    /* Couleurs spécifiques pour les états */
    --success-color: #27ae60;         /* Vert succès */
    --danger-color: #e74c3c;          /* Rouge danger */
    --warning-color: #f1c40f;         /* Jaune warning */
    --info-color: #3498db;            /* Bleu info */

    /* Couleurs neutres */
    --white-color: #fff;
    --black-color: #333;
    --gray-color: #777;

    /* Alias principaux */
    --color-primary: var(--primary-color);
    --color-primary-dark: var(--primary-dark);
    --color-secondary: var(--secondary-color);
    --color-secondary-dark: var(--secondary-dark);
    --color-complementary: var(--complementary-color);
    --color-complementary-dark: var(--complementary-dark);

    /* Alias pour compatibilité (danger, warning, etc.) */
    --color-success: var(--success-color);
    --color-danger: var(--danger-color);
    --color-warning: var(--warning-color);
    --color-info: var(--info-color);
    --color-success-dark: #219150;
    --color-danger-dark: #c0392b;
    --color-warning-dark: #b7950b;
    --color-info-dark: #217dbb;

    /* Couleurs neutres (alias) */
    --color-dark: var(--black-color);
    --color-dark-light: #555;
    --color-gray: var(--gray-color);
    --color-gray-light: #ecf0f1;
    --color-gray-lighter: #f8f9fa;
    --color-white: var(--white-color);
    --color-black: var(--black-color);

    /* Couleurs de fond */
    --bg-body: #f5f5f5;
    --bg-card: var(--white-color);
    --bg-sidebar: #2c3e50;
    --bg-input: #fafafa;

    /* Couleurs de texte */
    --text-primary: var(--black-color);
    --text-secondary: #666666;
    --text-muted: var(--gray-color);
    --text-white: var(--white-color);
    --text-light: #ecf0f1;

    /* Couleurs de bordure */
    --border-color: #ddd;
    --border-light: #eee;
    --border-dark: #ccc;

    /* Dégradés principaux harmonisés */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --gradient-secondary: linear-gradient(135deg, var(--secondary-color) 0%, var(--complementary-color) 100%);
    --gradient-complementary: linear-gradient(135deg, var(--complementary-color) 0%, var(--primary-color) 100%);
    --gradient-success: linear-gradient(135deg, var(--success-color) 0%, var(--primary-color) 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger-color) 0%, var(--primary-color) 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, var(--primary-color) 100%);
    --gradient-info: linear-gradient(135deg, var(--info-color) 0%, var(--primary-color) 100%);

    /* Espacement */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    --spacing-xl: 30px;
    --spacing-xxl: 40px;

    /* Bordures arrondies */
    --radius-sm: 5px;
    --radius-md: 8px;
    --radius-lg: 10px;
    --radius-xl: 15px;
    --radius-round: 50%;

    /* Ombres */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 2px 5px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);

    /* Typographie */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-base: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 20px;
    --font-size-xxl: 24px;
    --font-size-xxxl: 32px;

    /* Poids de police */
    --font-weight-normal: 400;
    --font-weight-medium: 600;
    --font-weight-bold: 700;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* Largeurs */
    --sidebar-width: 250px;
    --container-sm: 600px;
    --container-md: 800px;
    --container-lg: 900px;
    --container-xl: 1200px;

    /* Hauteurs */
    --header-height: 60px;
    --input-height: 40px;
    --button-height: 40px;

    /* Z-index */
    --z-dropdown: 1000;
    --z-modal: 1050;
    --z-tooltip: 1100;
}

/* Reset de base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    color: var(--text-primary);
    background: var(--bg-body);
    line-height: 1.6;
}

/* Utilitaires de texte */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

.text-muted {
    color: var(--text-muted);
}

.text-white {
    color: var(--text-white);
}

/* Utilitaires de marge */
.mt-xs { margin-top: var(--spacing-xs); }
.mt-sm { margin-top: var(--spacing-sm); }
.mt-md { margin-top: var(--spacing-md); }
.mt-lg { margin-top: var(--spacing-lg); }
.mt-xl { margin-top: var(--spacing-xl); }

.mb-xs { margin-bottom: var(--spacing-xs); }
.mb-sm { margin-bottom: var(--spacing-sm); }
.mb-md { margin-bottom: var(--spacing-md); }
.mb-lg { margin-bottom: var(--spacing-lg); }
.mb-xl { margin-bottom: var(--spacing-xl); }

/* Utilitaires de padding */
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }

/* Utilitaires de display */
.d-none { display: none; }
.d-block { display: block; }
.d-flex { display: flex; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }

/* Flexbox */
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }