/* ==========================================================
   SHADOW WARRIORS DESIGN SYSTEM - WotLK DARK FANTASY AESTHETIC
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root {
    --bg-main: #090c12;
    --bg-surface: #0f141f;
    --bg-surface-elevated: #161e2e;
    --bg-card: rgba(15, 20, 31, 0.85);
    
    --border-subtle: rgba(255, 255, 255, 0.08);
    --border-focus: #38bdf8;
    --border-gold: #f59e0b;
    
    --accent-frost: #38bdf8;
    --accent-frost-glow: rgba(56, 189, 248, 0.25);
    --accent-gold: #fbbf24;
    --accent-purple: #a855f7;
    
    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    
    /* WoW Class Colors */
    --c-paladin: #F58CBA;
    --c-guerrero: #C79C6E;
    --c-cazador: #ABD473;
    --c-picaro: #FFF569;
    --c-sacerdote: #FFFFFF;
    --c-dk: #C41F3B;
    --c-chaman: #0070DE;
    --c-mago: #69CCF0;
    --c-brujo: #9482C9;
    --c-druida: #FF7D0A;
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background-image: 
        radial-gradient(ellipse at 50% 0%, rgba(56, 189, 248, 0.07) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 100%, rgba(168, 85, 247, 0.05) 0%, transparent 50%);
    background-attachment: fixed;
}

.font-warcraft {
    font-family: 'Cinzel', serif;
    letter-spacing: 0.03em;
}

/* Glassmorphism Cards */
.glass-panel {
    background: var(--bg-card);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.6);
}

.glass-panel-hover {
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel-hover:hover {
    transform: translateY(-3px);
    border-color: rgba(56, 189, 248, 0.4);
    box-shadow: 0 15px 35px -5px rgba(56, 189, 248, 0.15);
}

/* WoW Class Color Utilities */
.c-paladin { color: var(--c-paladin); }
.c-guerrero { color: var(--c-guerrero); }
.c-cazador { color: var(--c-cazador); }
.c-picaro { color: var(--c-picaro); }
.c-sacerdote { color: var(--c-sacerdote); }
.c-dk { color: var(--c-dk); }
.c-chaman { color: var(--c-chaman); }
.c-mago { color: var(--c-mago); }
.c-brujo { color: var(--c-brujo); }
.c-druida { color: var(--c-druida); }

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #090c12;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #38bdf8;
}

/* Toast Notifications */
#toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.toast {
    animation: toastIn 0.3s ease-out forwards;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
@keyframes toastIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}