/* ===== STYLES DE BASE ===== */

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

/* Body */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #f8fafc;
    color: #334155;
    line-height: 1.6;
    padding: 70px 10px 10px;
    margin: 0;
    overflow-x: hidden;
    min-width: 481px;
}


:root {
    /* Variables CSS pour cohérence */

    /* Couleurs principales - Priorité aux nouvelles */
    --primary-blue: #0ea5e9;
    --primary-blue-hover: #0284c7;
    --primary-blue-light: #dbeafe;
    --primary-blue-dark: #0284c7;
    --primary-blue-darker: #0369a1;
    --primary-blue-text: #0c4a6e;

    /* Couleurs secondaires */
    --success-green: #10b981;
    --success-green-dark: #059669;
    --success-green-darker: #047857;
    --success-green-light: #ecfdf5;

    --warning-orange: #f59e0b;
    --warning-orange-hover: #d97706;
    --warning-orange-light: #fef3c7;
    --warning-orange-dark: #d97706;

    --danger-red: #ef4444;
    --error-red: #ef4444;
    --error-red-hover: #dc2626;
    --error-red-light: #fef2f2;
    --danger-red-dark: #dc2626;

    /* Couleurs de profil */
    --profile-purple: #6366f1;
    --profile-purple-dark: #5b21b6;
    --profile-purple-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    --profile-indicator-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

    /* Couleurs neutres */
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e2e8f0;
    --gray-300: #cbd5e1;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Couleurs spécifiques aux badges */
    --badge-blue-bg: #dbeafe;
    --badge-blue-text: #1e40af;
    --badge-blue-border: #3b82f6;

    --badge-red-bg: #fef2f2;
    --badge-red-text: #dc2626;
    --badge-red-border: #ef4444;

    --badge-yellow-bg: #fef3c7;
    --badge-yellow-text: #d97706;
    --badge-yellow-border: #f59e0b;

    --badge-green-bg: #ecfdf5;
    --badge-green-text: #059669;
    --badge-green-border: #10b981;

    /* ✅ NOUVEAU : Variables pour badges bleus */
    --badge-blue-text: #1e40af;
    --badge-blue-bg: #dbeafe;
    --badge-blue-border: #3b82f6;

    /* Espacements */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;

    /* Border radius - Deux systèmes disponibles */
    --border-radius-sm: 4px;
    --border-radius-md: 6px;
    --border-radius-lg: 8px;
    --border-radius-xl: 12px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;

    /* Ombres - Combinées et améliorées */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 4px 12px rgba(14, 165, 233, 0.3);

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Z-index */
    --z-modal: 10000;
    --z-profile-modal: 10001;
    --z-stats-modal: 10002;
    --z-indicator: 1000;
}