/**
 * MMAS — Design Tokens
 * Source UNIQUE pour toutes les pages.
 * Charger EN PREMIER, AVANT tout autre CSS.
 */
:root {
    /* Couleurs principales */
    --primary: #4338ca;
    --primary-dark: #3730a3;
    --primary-light: #6366f1;
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;

    --secondary: #0ea5e9;
    --secondary-dark: #0284c7;
    --secondary-light: #38bdf8;
    --accent: #8b5cf6;

    /* Surfaces */
    --surface: #ffffff;
    --background: #f8fafc;

    /* Sémantiques */
    --success: #10b981;
    --success-light: #d1fae5;
    --success-dark: #059669;
    --warning: #f59e0b;
    --warning-light: #fef3c7;
    --warning-dark: #d97706;
    --danger: #ef4444;
    --danger-light: #fee2e2;
    --danger-dark: #dc2626;
    --info: #3b82f6;
    --info-light: #dbeafe;

    /* Neutres (Tailwind Slate) */
    --white: #ffffff;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #78839a; /* WCAG AA compliant (~4.6:1 on white) */
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    --whatsapp: #25D366;
    --whatsapp-dark: #128C7E;

    /* Typo */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Rayons */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Ombres */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    --shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    --glass-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);

    /* Glassmorphism */
    --glass-bg: rgba(255, 255, 255, 0.7);
    --glass-border: 1px solid rgba(255, 255, 255, 0.3);
    --blur: blur(12px);

    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    --gradient-brand: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --gradient-sidebar: linear-gradient(180deg, var(--primary) 0%, var(--primary-dark) 40%, var(--secondary) 100%);
    --gradient-bg: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4338ca 100%);

    /* Transitions */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    /* Layout */
    --sidebar-width: 280px;
    --header-height: 70px;
}