/* ==============================================
   VARIABLES & DESIGN TOKENS
   ============================================== */
:root {

    --neon-primary: #00d2ff;
    --neon-secondary: #d112ff;
    --neon-accent: #2add58;
    --neon-danger: #ff4d4d;

    --bg-deep: #050505;
    --bg-body-gradient: linear-gradient(160deg, #050505 0%, #0a0a18 40%, #0d0d1a 100%);
    --bg-surface: rgba(12, 12, 22, 0.88);
    --bg-glass: rgba(18, 18, 32, 0.55);
    --bg-input: rgba(8, 8, 16, 0.85);
    --glass-border: rgba(255, 255, 255, 0.06);

    --text-primary: #e0e0e0;
    --text-secondary: #e0e0e0a4;
    --text-heading: #ffffff;
    --text-muted: #777;
    --text-placeholder: #555;

    --font-sans: 'Segoe UI', system-ui, -apple-system, sans-serif;
    --font-mono: 'Courier New', 'Fira Mono', monospace;

    --glow-xxxs: 0 0 1px var(--neon-primary);
    --glow-xxs: 0 0 2px var(--neon-primary);
    --glow-xs: 0 0 4px var(--neon-primary);
    --glow-sm: 0 0 6px var(--neon-primary), 0 0 12px color-mix(in srgb, var(--neon-primary) 40%, transparent);
    --glow-md: 0 0 10px var(--neon-primary), 0 0 30px color-mix(in srgb, var(--neon-primary) 30%, transparent);
    --glow-lg: 0 0 15px var(--neon-primary), 0 0 50px color-mix(in srgb, var(--neon-primary) 25%, transparent);
    --glow-secondary: 0 0 10px var(--neon-secondary), 0 0 30px color-mix(in srgb, var(--neon-secondary) 30%, transparent);

    --radius-sm: 6px;
    --radius: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: 0.20s ease;

    --sidebar-width: 240px;
    --sidebar-collapsed: 60px;

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

    --card-padding: 25px;
    --workspace-padding: 25px;
}