:root {
    /* Couleurs du thème */
    --color-primary: #0077c0;
    --color-primary-hover: #00304d;
    --color-primary-light: #385170;
    --color-primary-very-light: #85b1e6;
    --color-primary-ultra-light: #006fb417;
    --color-primary-dark: #0d1b2a;
    --color-secondary: #C5313D;
    --color-secondary-hover: #d42d3b;
    --color-logo: #C5313D;

    /* Couleurs de fond */
    --color-background: #f8f5f5;
    --color-background-light: #ffffff;
    --color-background-dark: #2a2438;
    --color-background-task: #fcf1b9;

    /* Couleurs de texte */
    --color-text: #352f44;
    --color-text-light: #ffffff;
    --color-text-muted: #666666;
    --color-header-title: #e6e6e6;

    /* Couleurs de shift */
    --color-day: #9cb2f0;
    --color-day-light: #c5d9f1;
    --color-evening: #f8cb98;
    --color-evening-light: #fcd5b4;
    --color-night: #252525;
    --color-night-light: #cccccc;

    /* Couleurs d'état */
    --color-success: #28a745;
    --color-success: #28a745;
    --color-success-hover: #219653;
    --color-success-light: #e1f2e3;
    --color-success-dark: #148545;
    --color-warning: #f89e16;
    --color-warning-hover: #f5d43b;
    --color-warning-light: #f9e584;
    --color-warning-dark: #e0a826;
    --color-danger: #dc3545;
    --color-danger-hover: #d62831;
    --color-danger-light: #f1b0b7;
    --color-danger-dark: #9a2930;
    --color-info: #17a2b8;
    --color-info-hover: #1697b2;
    --color-info-light: #b2d1e7;
    --color-info-dark: #007084;
    --color-selected:#7a257d;
    --color-border: #352f44;
    --color-remise: #28a745;
    --color-change: #002657;
    --color-patching: #1697b2;
    --color-alerte: #fbff0a;
    --color-alerte2: #f5d43b;
  

    /* Ombres */
    --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-large: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-sidebar: 4px 0 10px rgba(0, 0, 0, 0.2);

    /* Espacements */
    --spacing-xxs: 0.10rem;    /* 2px */
    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;    /* 6px */
    --spacing-ld: 0.75rem;      /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 2rem;       /* 32px */

    /* Bordures */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-ld: 10px;
    --border-radius-lg: 12px;
    --border-radius-xl: 24px;
    --border-width: 1px;
    --border-width-thick: 2px;

    /* Transitions */
    --transition-speed-fast: 0.2s;
    --transition-speed-normal: 0.3s;
    --transition-speed-slow: 0.5s;
    --transition-timing: ease;

    /* Layout */
    --sidebar-width: 200px;
    --header-height: 60px;
    --footer-height: 10px;
    --logo-height: 60px;

    /* Z-index */
    --z-index-sidebar: 999;
    --z-index-help: 1500;
    --z-index-header: 1000;
    --z-index-modal: 2000;

    /* Typographie */
    --font-family-base: 'Arial', sans-serif;
    --font-size-xs: 0.65rem;    /* 10px */
    --font-size-sm: 0.75rem;   /* 12px */
    --font-size-md: 0.85rem;       /* 14px */
    --font-size-lg: 1rem;    /* 18px */
    --font-size-xl: 1.25rem;     /* 20px */
    --font-size-xxl: 1.5rem;     /* 30px */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

    /* Cards */
    --card-padding: 20px;
    --card-margin: 20px;
    --card-shadow: var(--shadow-small);
    --card-hover-transform: translateY(-5px);

    /* Boutons */
    --button-padding: 10px 20px;
    --button-border-radius: var(--border-radius-sm);
    --button-transition: all var(--transition-speed-normal) var(--transition-timing);

    /* Menu */
    --menu-item-padding: 15px 20px;
    --menu-item-hover-bg: var(--color-primary-light);
    --menu-item-active-border: 4px solid var(--color-secondary);
}

/* ==========================================================================
   MODE SOMBRE GLOBAL (night-dim)
   Inspiré du thème de monitoring (bleu nuit & ardoise profond)
   ========================================================================== */
html.night-dim,
body.night-dim {
    --color-background: #0f1c2e;
    --color-background-light: #182a42;
    --color-background-dark: #0a1320;
    --color-background-task: #253d5e;

    --color-text: #e2eaf5;
    --color-text-muted: #95a9c3;
    --color-border: #284469;

    --color-primary-light: #1f395c;
    --color-primary-very-light: #284e7e;
    --color-primary-ultra-light: rgba(40, 78, 126, 0.25);

    --shadow-small: 0 4px 10px rgba(0, 0, 0, 0.35);
    --shadow-medium: 0 8px 18px rgba(0, 0, 0, 0.45);
    --shadow-large: 0 14px 28px rgba(0, 0, 0, 0.55);

    /* Thème monitoring compatible */
    --monitor-bg-top: #1b3350;
    --monitor-bg-bottom: #0d1a29;
    --monitor-card-bg: rgba(24, 42, 66, 0.92);
    --monitor-card-border: rgba(125, 180, 240, 0.3);
    --monitor-title: #edf4fe;
    --monitor-muted: #9bb4d4;
    --monitor-primary: #7dbdff;
    --monitor-row-border: rgba(130, 164, 201, 0.2);
}