/* ============================================
   Design Tokens
   ============================================ */
:root {
    --bg-base: #0a0f1a;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-elevated: rgba(255, 255, 255, 0.06);
    --bg-hover: rgba(255, 255, 255, 0.08);
    --border-color: rgba(255, 255, 255, 0.08);
    --border-glow: rgba(52, 211, 153, 0.25);

    --accent-green: #34d399;
    --accent-emerald: #10b981;
    --accent-teal: #14b8a6;
    --accent-cyan: #06b6d4;
    --accent-blue: #3b82f6;
    --accent-amber: #f59e0b;
    --accent-red: #ef4444;
    --accent-purple: #a78bfa;

    --text-primary: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;

    --font-sans: 'Inter', -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
}

/* ============================================
   Reset & Base
   ============================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-sans);
    background: var(--bg-base);
    color: var(--text-primary);
    min-height: 100vh;
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animated background */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(ellipse 600px 400px at 20% 20%, rgba(16, 185, 129, 0.06), transparent),
        radial-gradient(ellipse 500px 500px at 80% 80%, rgba(6, 182, 212, 0.04), transparent),
        radial-gradient(ellipse 400px 300px at 50% 50%, rgba(59, 130, 246, 0.03), transparent);
    z-index: -1;
    animation: bgPulse 12s ease-in-out infinite alternate;
}

@keyframes bgPulse {
    0% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}