:root {
    /* ── Palette legacy (clair) ── */
    --color-primary: #3d5a80;
    --color-primary-dark: #5a6f8a;
    --color-accent: #03a9f4;
    --color-accent-teal: #1abc9c;
    --color-accent-teal-hover: #16a085;
    --color-btn-save: #c7ff9c;
    --color-btn-save-hover: #b8f085;
    --color-success: #008800;
    --color-success-bg: #bde4b6;
    --color-warning: #fac026;
    --color-warning-bg: #ffefbf;
    --color-notification-banner-bg: var(--color-warning-bg);
    --color-notification-banner-border: var(--color-warning);
    --color-notification-banner-text: var(--color-text);
    --color-notification-count-bg: var(--color-warning);
    --color-notification-count-text: #333333;
    --color-danger: #e74c3c;
    --color-bg: #ffffff;
    --color-bg-muted: #f6f6f6;
    --color-surface: #ffffff;
    --color-text: #333333;
    --color-text-muted: #666666;
    --color-text-light: #989898;
    --color-border: #dddddd;
    --color-sidebar-text: #ffffff;
    --color-sidebar-hover: rgba(255, 255, 255, 0.12);
    --color-sidebar-active: rgba(3, 169, 244, 0.35);
    --color-on-accent: #ffffff;
    --color-link: #15428b;
    --color-nav-icon: #555555;
    --color-nav-chevron: #bbbbbb;
    --color-input-bg: #ffffff;
    --color-btn-muted-bg: #f0f0f0;
    --color-btn-muted-hover: rgba(109, 132, 163, 0.1);
    --color-periph-header-start: #d9e5f3;
    --color-periph-header-end: #c5d4e8;
    --color-section-heading-bg: #6d84a3;
    --color-section-heading-text: #ffffff;
    --color-subtitle-bg: #03a9f4;
    --color-panel-bg-default: #dddddd;
    --color-periph-badge-text: #5a6d85;
    --color-periph-badge-bg: rgba(255, 255, 255, 0.65);
    --color-feedback-success-text: #2f5f3a;
    --color-feedback-success-bg: #e8f5eb;
    --color-feedback-success-border: #c8e6cf;
    --color-status-error-bg: #ff0000;
    --color-status-warning-bg: #ff9900;
    --color-status-na-bg: #dddddd;
    --color-row-hover: rgba(0, 0, 0, 0.02);
    --color-row-highlight: rgba(109, 132, 163, 0.1);
    --color-row-highlight-strong: rgba(109, 132, 163, 0.16);
    --color-out-badge-text: #1d4ed8;
    --color-out-badge-bg: #eff6ff;
    --color-out-badge-border: #93c5fd;
    --color-accent-ring: rgba(3, 169, 244, 0.25);
    --color-nav-item-active-bg: rgba(3, 169, 244, 0.08);
    --color-surface-inset: #f3f3f3;
    --color-toolbar-bg: #eef1f4;
    --color-config-tab-active-bg: #dfe8f6;
    --color-config-tab-active-border: #99bbe8;
    --color-app-toolbar-bg: var(--color-primary);
    --color-app-toolbar-text: #ffffff;
    --color-app-toolbar-icon: #ffffff;
    --color-app-toolbar-btn-hover: rgba(255, 255, 255, 0.12);
    --shadow-header: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --sidebar-width: 250px;
    --sidebar-collapsed: 60px;
    --header-height: 54px;
    --font-family: "Roboto", "Helvetica Neue", Arial, sans-serif;
    --transition: 0.25s ease;
}

html.dark-mode {
    --color-primary: #4a5d73;
    --color-primary-dark: #3d4f62;
    --color-accent: #29b6f6;
    --color-accent-teal: #26a69a;
    --color-accent-teal-hover: #2bbbad;
    --color-warning: #d4a82a;
    --color-warning-bg: #4a3d16;
    --color-bg: #1e1e1e;
    --color-bg-muted: #121212;
    --color-surface: #2c2c2c;
    --color-text: #e0e0e0;
    --color-text-muted: #b0b0b0;
    --color-text-light: #888888;
    --color-border: #444444;
    --color-sidebar-text: #e0e0e0;
    --color-sidebar-hover: rgba(255, 255, 255, 0.08);
    --color-sidebar-active: rgba(41, 182, 246, 0.25);
    --color-link: #7eb8ff;
    --color-nav-icon: #b0b0b0;
    --color-nav-chevron: #777777;
    --color-input-bg: #2c2c2c;
    --color-btn-muted-bg: #2a2d35;
    --color-btn-muted-hover: rgba(255, 255, 255, 0.06);
    --color-periph-header-start: #3a4a5c;
    --color-periph-header-end: #2f3d4d;
    --color-section-heading-bg: #3a4a5c;
    --color-subtitle-bg: #29b6f6;
    --color-panel-bg-default: #111111;
    --color-periph-badge-text: #c5d4e8;
    --color-periph-badge-bg: rgba(0, 0, 0, 0.2);
    --color-feedback-success-text: #b8e0c0;
    --color-feedback-success-bg: #1e3a28;
    --color-feedback-success-border: #2d5a3d;
    --color-status-na-bg: #555555;
    --color-row-hover: rgba(255, 255, 255, 0.03);
    --color-row-highlight: rgba(255, 255, 255, 0.06);
    --color-row-highlight-strong: rgba(255, 255, 255, 0.1);
    --color-out-badge-text: #93c5fd;
    --color-out-badge-bg: #1e3a5f;
    --color-out-badge-border: #3b82f6;
    --color-accent-ring: rgba(41, 182, 246, 0.3);
    --color-nav-item-active-bg: rgba(41, 182, 246, 0.12);
    --color-surface-inset: #2a2d35;
    --color-toolbar-bg: #252830;
    --color-config-tab-active-bg: #3a4a5c;
    --color-config-tab-active-border: #6d84a3;
    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.5);
}

html.modern-look {
    --color-primary: #1666fa;
    --color-primary-dark: #1254d4;
    --color-accent: #1666fa;
    --color-accent-teal: #1666fa;
    --color-accent-teal-hover: #1254d4;
    --color-bg: #ffffff;
    --color-bg-muted: #ffffff;
    --color-surface: #ffffff;
    --color-input-bg: #ffffff;
    --color-text: #0f172a;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-border: #e2e8f0;
    --color-link: #1666fa;
    --color-nav-icon: #475569;
    --color-periph-header-start: #f0f6ff;
    --color-periph-header-end: #e8f0fe;
    --color-section-heading-bg: #eef4ff;
    --color-section-heading-text: var(--color-text);
    --color-subtitle-bg: #1666fa;
    --color-btn-muted-bg: #f1f5f9;
    --color-btn-muted-hover: rgba(22, 102, 250, 0.08);
    --color-panel-bg-default: #ffffff;
    --color-toolbar-bg: #ffffff;
    --color-surface-inset: #f8fafc;
    --color-config-tab-active-bg: #eef4ff;
    --color-config-tab-active-border: #1666fa;
    --color-out-badge-text: #1666fa;
    --color-out-badge-bg: #eef4ff;
    --color-out-badge-border: #93b4fd;
    --color-accent-ring: rgba(22, 102, 250, 0.25);
    --color-nav-item-active-bg: rgba(22, 102, 250, 0.08);
    --color-sidebar-active: rgba(22, 102, 250, 0.35);
    --color-row-highlight: rgba(22, 102, 250, 0.08);
    --color-row-highlight-strong: rgba(22, 102, 250, 0.14);
    --color-app-toolbar-bg: #ffffff;
    --color-app-toolbar-text: #1e293b;
    --color-app-toolbar-icon: #1e293b;
    --color-app-toolbar-btn-hover: rgba(30, 41, 59, 0.08);
    --color-notification-banner-bg: #e6f4ea;
    --color-notification-banner-border: #b7dfc8;
    --color-notification-banner-text: #1b5e20;
    --color-notification-count-bg: #2e7d32;
    --color-notification-count-text: #ffffff;
    --shadow-header: 0 1px 0 #e2e8f0;
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 8px 24px rgba(22, 102, 250, 0.12);
    --radius-md: 12px;
    --radius-lg: 16px;
    --font-family: "Inter", "Roboto", "Helvetica Neue", Arial, sans-serif;
}

html.dark-mode.modern-look {
    --color-primary: #3b82f6;
    --color-primary-dark: #2563eb;
    --color-accent: #3b82f6;
    --color-accent-teal: #60a5fa;
    --color-accent-teal-hover: #3b82f6;
    --color-bg: #0f172a;
    --color-bg-muted: #0f172a;
    --color-surface: #1e293b;
    --color-input-bg: #1e293b;
    --color-text: #e2e8f0;
    --color-text-muted: #94a3b8;
    --color-text-light: #64748b;
    --color-border: #334155;
    --color-link: #60a5fa;
    --color-periph-header-start: #1e3a5f;
    --color-periph-header-end: #172554;
    --color-section-heading-bg: #1e3a5f;
    --color-subtitle-bg: #3b82f6;
    --color-btn-muted-bg: #1e293b;
    --color-panel-bg-default: #0f172a;
    --color-toolbar-bg: #1e293b;
    --color-surface-inset: #1e293b;
    --color-config-tab-active-bg: #1e3a5f;
    --color-config-tab-active-border: #3b82f6;
    --color-out-badge-text: #93c5fd;
    --color-out-badge-bg: #172554;
    --color-out-badge-border: #3b82f6;
    --color-accent-ring: rgba(59, 130, 246, 0.35);
    --color-nav-item-active-bg: rgba(59, 130, 246, 0.12);
    --color-sidebar-active: rgba(59, 130, 246, 0.3);
    --color-row-highlight: rgba(59, 130, 246, 0.1);
    --color-row-highlight-strong: rgba(59, 130, 246, 0.18);
    --color-app-toolbar-bg: #1e293b;
    --color-app-toolbar-text: #e2e8f0;
    --color-app-toolbar-icon: #e2e8f0;
    --color-app-toolbar-btn-hover: rgba(255, 255, 255, 0.08);
    --color-notification-banner-bg: #1a2e22;
    --color-notification-banner-border: #2d5a3d;
    --color-notification-banner-text: #b8e0c0;
    --color-notification-count-bg: #388e3c;
    --color-notification-count-text: #ffffff;
    --shadow-header: 0 1px 0 #334155;
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45);
    --shadow-card-hover: 0 8px 28px rgba(0, 0, 0, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --transition: 0.01ms;
    }
}