/* tokens.css — Jetons de design (Design Tokens) */

:root {
    /* --- Couleurs de fond --- */
    --color-bg-base: #0f172a;
    --color-bg-surface: rgba(30, 41, 59, 0.50);
    --color-bg-surface-strong: rgba(30, 41, 59, 0.70);
    --color-bg-surface-subtle: rgba(30, 41, 59, 0.30);
    --color-bg-surface-hover: rgba(30, 41, 59, 0.65);

    /* --- Gradient fond global --- */
    --gradient-mesh: linear-gradient(135deg, var(--color-bg-base) 0%, var(--color-bg-tint) 50%, var(--color-bg-base) 100%);

    /* --- Texte --- */
    --color-text-primary: rgba(255, 255, 255, 0.90);
    --color-text-secondary: rgba(255, 255, 255, 0.50);
    --color-text-muted: rgba(255, 255, 255, 0.25);
    --color-text-disabled: rgba(255, 255, 255, 0.15);

    /* --- Accent module (override par module via <style> inline) --- */
    --accent: #6366f1;
    --accent-light: #818cf8;
    --accent-dark: #4f46e5;
    --accent-rgb: 99, 102, 241;
    --accent-light-rgb: 129, 140, 248;
    --color-bg-tint: #1e1b4b;

    /* --- Semantique (aliasées vers accent) --- */
    --color-brand: var(--accent);
    --color-brand-light: var(--accent-light);
    --color-brand-dark: var(--accent-dark);
    --color-success: #10b981;
    --color-success-light: #34d399;
    --color-warning: #f59e0b;
    --color-warning-light: #fbbf24;
    --color-danger: #ef4444;
    --color-danger-light: #f87171;
    --color-info: #0ea5e9;
    --color-info-light: #38bdf8;

    /* --- Bordures --- */
    --color-border: rgba(255, 255, 255, 0.10);
    --color-border-hover: rgba(255, 255, 255, 0.20);
    --color-border-focus: var(--color-brand);

    /* --- Rayon de bordure --- */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* --- Ombres --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.3);
    --shadow-glow-brand: 0 0 20px rgba(var(--accent-rgb), 0.3);
    --shadow-glow-success: 0 0 20px rgba(16, 185, 129, 0.3);
    --shadow-glow-danger: 0 0 20px rgba(239, 68, 68, 0.3);

    /* --- Transitions --- */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* --- Dimensions layout --- */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 72px;
    --topbar-height: 64px;

    /* --- Blur glassmorphism --- */
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 20px;

    /* --- Z-index --- */
    --z-sidebar: 40;
    --z-topbar: 30;
    --z-dropdown: 50;
    --z-modal: 60;
    --z-toast: 70;
    --z-tooltip: 9999;
}