/* ===================================
   INSTRURAP - DESIGN SYSTEM v2.0
   Système de design moderne et cohérent
   =================================== */

:root {
    /* === COULEURS PRIMAIRES (ROUGE) === */
    --primary-500: #EF4444;
    --primary-600: #DC2626;
    --primary-700: #B91C1C;
    --primary-400: #F87171;
    --primary-300: #FCA5A5;

    /* === COULEURS ACCENT === */
    --accent-500: #10B981;
    --accent-600: #059669;
    --accent-400: #34D399;
    --accent-300: #6EE7B7;

    /* === BACKGROUNDS === */
    --bg-app: #0A0A0A;
    --bg-elevated: #141414;
    --bg-card: #1A1A1A;
    --bg-card-hover: #242424;
    --bg-input: #1F1F1F;
    --bg-overlay: rgba(10, 10, 10, 0.95);

    /* === TEXTE === */
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-tertiary: #71717A;
    --text-muted: #52525B;

    /* === BORDURES === */
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-medium: rgba(255, 255, 255, 0.12);
    --border-strong: rgba(255, 255, 255, 0.2);

    /* === OMBRES === */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.6);

    /* === RAYONS DE BORDURE === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    /* === ESPACEMENTS === */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* === TYPOGRAPHIE === */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'Fira Code', 'Consolas', monospace;

    /* === TRANSITIONS === */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);

    /* === DIMENSIONS LAYOUT === */
    --sidenav-width: 260px;
    --sidenav-collapsed-width: 72px;
    --right-panel-width: 300px;

    /* === Z-INDEX === */
    --z-sidenav: 1000;
    --z-header: 900;
    --z-modal: 2000;
    --z-dropdown: 1500;
    --z-player: 950;
}

/* === RESET & BASE === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg-app) !important;
    color: var(--text-primary);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === SCROLLBAR CUSTOM === */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-elevated);
}

::-webkit-scrollbar-thumb {
    background: var(--bg-card-hover);
    border-radius: var(--radius-full);
    border: 3px solid var(--bg-elevated);
}

::-webkit-scrollbar-thumb:hover {
    background: #444;
}

/* === UTILITY CLASSES === */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary { color: var(--text-tertiary); }
.text-muted { color: var(--text-muted); }

.bg-card { background-color: var(--bg-card); }
.bg-elevated { background-color: var(--bg-elevated); }
.bg-card-hover { background-color: var(--bg-card-hover); }

.border-subtle { border-color: var(--border-subtle); }
.border-medium { border-color: var(--border-medium); }

.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* === GRADIENTS === */
.gradient-primary {
    background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-700) 100%);
}

.gradient-accent {
    background: linear-gradient(135deg, var(--accent-600) 0%, var(--accent-500) 100%);
}

.gradient-glass {
    background: linear-gradient(135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 100%
    );
    backdrop-filter: blur(20px);
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(0.98);
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.animate-fadeIn { animation: fadeIn var(--transition-base); }
.animate-slideInLeft { animation: slideInLeft var(--transition-base); }
.animate-slideInUp { animation: slideInUp var(--transition-base); }
.animate-scaleIn { animation: scaleIn var(--transition-base); }

/* === LOADING STATES === */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--bg-card) 0%,
        var(--bg-card-hover) 50%,
        var(--bg-card) 100%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-md);
}

/* === FOCUS STATES === */
*:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

/* === SELECTION === */
::selection {
    background-color: var(--primary-500);
    color: white;
}

::-moz-selection {
    background-color: var(--primary-500);
    color: white;
}

/* ===================================
   THÈME CLAIR
   =================================== */
[data-theme="light"] {
    --bg-app: #F4F4F5;
    --bg-elevated: #FFFFFF;
    --bg-card: #F0F0F3;
    --bg-card-hover: #E4E4E7;
    --bg-input: #FAFAFA;
    --bg-overlay: rgba(244, 244, 245, 0.97);

    --text-primary: #09090B;
    --text-secondary: #52525B;
    --text-tertiary: #71717A;
    --text-muted: #A1A1AA;

    --border-subtle: rgba(0, 0, 0, 0.07);
    --border-medium: rgba(0, 0, 0, 0.11);
    --border-strong: rgba(0, 0, 0, 0.20);

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.07);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.10);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);
    --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.18);
}

[data-theme="light"] ::-webkit-scrollbar-track {
    background: var(--bg-card);
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
    background: #C0C0C8;
    border-color: var(--bg-card);
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
    background: #A0A0A8;
}

/* Transition douce lors du changement de thème */
html.theme-transitioning,
html.theme-transitioning *,
html.theme-transitioning *::before,
html.theme-transitioning *::after {
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, box-shadow 0.25s ease !important;
}