/* ==========================================
   VARIABLES & DESIGN TOKENS (LIGHT & DARK)
   ========================================== */

:root {
    --bg-gradient: radial-gradient(circle at 50% 50%, #0d091a 0%, #050308 100%);
    --panel-bg: rgba(20, 16, 32, 0.55);
    --panel-border: rgba(255, 255, 255, 0.08);
    --panel-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);

    --primary: #8a2be2;
    --primary-glow: rgba(138, 43, 226, 0.4);
    --accent: #00f2fe;
    --accent-glow: rgba(0, 242, 254, 0.4);

    --text-main: #f0f0f5;
    --text-muted: #a0a0b5;
    --text-bright: #ffffff;

    --card-bg: rgba(255, 255, 255, 0.02);
    --card-border: rgba(255, 255, 255, 0.05);
    --card-hover-bg: rgba(255, 255, 255, 0.05);

    --success: #00e676;
    --success-bg: rgba(0, 230, 118, 0.15);
    --success-border: rgba(0, 230, 118, 0.4);

    --error: #ff1744;
    --error-bg: rgba(255, 23, 68, 0.15);
    --error-border: rgba(255, 23, 68, 0.4);

    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    --font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

[data-theme="light"] {
    --bg-gradient: radial-gradient(circle at 50% 50%, #f0f7ff 0%, #dbeafe 100%);
    --panel-bg: rgba(255, 255, 255, 0.88);
    --panel-border: rgba(203, 213, 225, 0.8);
    --panel-shadow: 0 20px 50px rgba(15, 23, 42, 0.1);

    --primary: #7c3aed;
    --primary-glow: rgba(124, 58, 237, 0.25);
    --accent: #0284c7;
    --accent-glow: rgba(2, 132, 199, 0.25);

    --text-main: #1e293b;
    --text-muted: #64748b;
    --text-bright: #0f172a;

    --card-bg: #f8fafc;
    --card-border: rgba(203, 213, 225, 0.7);
    --card-hover-bg: #f1f5f9;

    --success: #16a34a;
    --success-bg: rgba(22, 163, 74, 0.12);
    --success-border: rgba(22, 163, 74, 0.35);

    --error: #dc2626;
    --error-bg: rgba(220, 38, 38, 0.12);
    --error-border: rgba(220, 38, 38, 0.35);
}