:root {
    /* --- Core Palette: Violet & Cyan (Vibrant) --- */
    --primary: #8B5CF6;       /* Violet 500 */
    --primary-hover: #7C3AED; /* Violet 600 */
    --secondary: #06B6D4;     /* Cyan 500 */
    --accent: #F43F5E;        /* Rose 500 */
    
    /* --- Gradients --- */
    --bg-mesh: radial-gradient(at 0% 0%, rgba(139, 92, 246, 0.15) 0px, transparent 50%),
               radial-gradient(at 100% 0%, rgba(6, 182, 212, 0.15) 0px, transparent 50%),
               radial-gradient(at 100% 100%, rgba(244, 63, 94, 0.05) 0px, transparent 50%),
               radial-gradient(at 0% 100%, rgba(245, 158, 11, 0.05) 0px, transparent 50%);
               
    --primary-gradient: linear-gradient(135deg, #8B5CF6 0%, #3B82F6 100%);
    --card-gradient: linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0.4) 100%);
    
    /* --- Surfaces --- */
    --bg-main: #F8FAFC;
    --surface-white: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.5);
    
    /* --- Shadows --- */
    --shadow-sm: 0 2px 4px rgba(148, 163, 184, 0.1);
    --shadow-md: 0 8px 16px -4px rgba(139, 92, 246, 0.1), 0 4px 6px -2px rgba(148, 163, 184, 0.05);
    --shadow-lg: 0 12px 24px -6px rgba(139, 92, 246, 0.15);
    
    /* --- Typography --- */
    --font-main: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: var(--bg-main);
    background-image: var(--bg-mesh);
    background-attachment: fixed;
    background-size: cover;
    color: #1E293B;
    -webkit-font-smoothing: antialiased;
}

/* Glassmorphism Utilities */
.glass-panel {
    background: var(--surface-white);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.text-gradient {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Scrollbar Enhancement */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(139, 92, 246, 0.2);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(139, 92, 246, 0.4);
}