:root {
    /* Colors - Neo Manga Palette */
    --color-bg: #050510;
    --color-bg-rgb: 5, 5, 16;
    --color-surface: rgba(13, 13, 26, 0.8);
    --color-surface-hover: rgba(20, 20, 40, 0.9);
    --color-surface-brighter: rgba(30, 30, 60, 0.95);
    --color-border: rgba(255, 255, 255, 0.08);
    --color-border-glow: rgba(0, 243, 255, 0.3);

    /* Neon Accents */
    --color-primary: #00f3ff;
    --color-primary-rgb: 0, 243, 255;
    --color-secondary: #ff00ff;
    --color-secondary-rgb: 255, 0, 255;
    --color-accent: #7000ff;
    --color-accent-rgb: 112, 0, 255;
    --color-success: #00ffaa;
    --color-success-rgb: 0, 255, 170;
    --color-error: #ff3366;
    --color-error-rgb: 255, 51, 102;
    --color-warning: #ffcc00;
    --color-surface-rgb: 13, 13, 26;

    /* Gradients */
    --grad-neon: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
    --grad-surface: linear-gradient(180deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0) 100%);
    --grad-dark: linear-gradient(180deg, #0a0a1a 0%, #050510 100%);

    /* Typography */
    --color-text: #eef2f5;
    --color-text-dim: #94a3b8;
    --color-text-muted: #64748b;
    --color-text-inverse: #050510;

    /* Fonts */
    --font-sans: 'Exo 2', system-ui, -apple-system, sans-serif;
    --font-display: 'Orbitron', monospace;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 4rem;
    --space-3xl: 6rem;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Shadows & Glows */
    --glow-primary: 0 0 15px rgba(var(--color-primary-rgb), 0.4);
    --glow-secondary: 0 0 15px rgba(var(--color-secondary-rgb), 0.4);
    --glow-text: 0 0 10px rgba(var(--color-primary-rgb), 0.5);
    --glow-button: 0 0 20px rgba(var(--color-primary-rgb), 0.5);
    --shadow-card: 0 10px 30px -10px rgba(0, 0, 0, 0.5);

    /* Utilities */
    --glass-blur: blur(12px);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Theme Variant: Neo Noir (Subtle/Darker) */
html.theme-noir {
    --color-bg: #010103;
    --color-surface: #0a0a0c;
    --color-primary: #ffffff;
    --color-primary-rgb: 255, 255, 255;
    --color-secondary: #333333;
    --color-secondary-rgb: 51, 51, 51;
    --color-border-glow: rgba(255, 255, 255, 0.1);
    --glow-primary: 0 0 10px rgba(255, 255, 255, 0.2);
    --grad-neon: linear-gradient(135deg, #ffffff, #888888);
}

/* Base Body Styling */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    line-height: 1.6;
    overflow-x: hidden;
}

/* Animations */
@keyframes neonPulse {
    0% {
        box-shadow: 0 0 5px var(--color-primary-dim);
    }

    50% {
        box-shadow: 0 0 20px var(--color-primary-dim), 0 0 10px var(--color-primary);
    }

    100% {
        box-shadow: 0 0 5px var(--color-primary-dim);
    }
}