:root {
    /* Dark Base */
    --bg-primary:        #0A0A12;
    --bg-secondary:      #111120;
    --bg-tertiary:       #1A1A2E;
    --bg-elevated:       #222240;
    --bg-input:          #141428;

    /* Glass Morphism */
    --glass-bg:          rgba(17, 17, 32, 0.7);
    --glass-border:      rgba(255, 255, 255, 0.08);
    --glass-blur:        12px;
    --glass-bg-hover:    rgba(17, 17, 32, 0.85);
    --glass-bg-solid:    rgba(22, 22, 42, 0.95);

    /* Neon Accents */
    --neon-cyan:         #00F5FF;
    --neon-magenta:      #FF00FF;
    --neon-green:        #39FF14;
    --neon-yellow:       #FFE600;
    --neon-purple:       #BF40BF;
    --neon-orange:       #FF6600;
    --neon-pink:         #FF69B4;
    --neon-red:          #FF3131;

    /* Neon Glows */
    --glow-cyan:         0 0 10px rgba(0, 245, 255, 0.3), 0 0 40px rgba(0, 245, 255, 0.1);
    --glow-magenta:      0 0 10px rgba(255, 0, 255, 0.3), 0 0 40px rgba(255, 0, 255, 0.1);
    --glow-green:        0 0 10px rgba(57, 255, 20, 0.3), 0 0 40px rgba(57, 255, 20, 0.1);
    --glow-cyan-strong:  0 0 5px rgba(0, 245, 255, 0.4), 0 0 15px rgba(0, 245, 255, 0.2), 0 0 45px rgba(0, 245, 255, 0.1);

    /* Text */
    --text-primary:      #E8E6F0;
    --text-secondary:    #8B87A0;
    --text-tertiary:     #5A5670;
    --text-neon:         #00F5FF;

    /* Borders */
    --border-subtle:     rgba(255, 255, 255, 0.06);
    --border-default:    rgba(255, 255, 255, 0.1);
    --border-focus:      var(--neon-cyan);

    /* Typography */
    --font-pixel:        'Press Start 2P', monospace;
    --font-sans:         'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Pixel font sizes */
    --pixel-xs:          0.5rem;
    --pixel-sm:          0.625rem;
    --pixel-base:        0.75rem;
    --pixel-lg:          0.875rem;
    --pixel-xl:          1rem;
    --pixel-2xl:         1.25rem;
    --pixel-3xl:         1.5rem;
    --pixel-hero:        2rem;

    /* Sans font sizes */
    --text-xs:           0.75rem;
    --text-sm:           0.875rem;
    --text-base:         1rem;
    --text-lg:           1.125rem;
    --text-xl:           1.25rem;
    --text-2xl:          1.5rem;

    /* Spacing */
    --space-xs:    4px;
    --space-sm:    8px;
    --space-md:    16px;
    --space-lg:    24px;
    --space-xl:    32px;
    --space-2xl:   48px;
    --space-3xl:   64px;

    /* Border Radius */
    --radius-sm:     4px;
    --radius-md:     8px;
    --radius-lg:     16px;
    --radius-xl:     24px;
    --radius-full:   9999px;

    /* Layout */
    --navbar-height:    64px;
    --friends-panel-width: 320px;
    --content-max-width: 1400px;

    /* Transitions */
    --transition-fast:   150ms ease;
    --transition-base:   250ms ease;
    --transition-slow:   400ms ease;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5);
    --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.6);
    --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.7);
    --shadow-neon: 0 0 20px rgba(0, 245, 255, 0.15);

    /* Status Colors */
    --status-online:  #39FF14;
    --status-away:    #FFE600;
    --status-ingame:  #BF40BF;
    --status-offline: #5A5670;
}
