:root {
    --bg-color: #121214;
    --card-bg: #1e1e24;
    --text-main: #ffffff;
    --text-muted: #a0a0a0;
    --accent: #646cff;
    --accent-hover: #747bff;
    --success: #4caf50;
    --warning: #ffc107;
    --danger: #f44336;
    --gold: #ffd700;
    --border-radius: 12px;

    /* Phase 2 Tokens */
    --bg-xp: #ffd700;
    --bg-hp: #d32f2f;
    --bg-mp: #1976d2;
    --hp-gradient: linear-gradient(90deg, #d32f2f, #8e0000);
    --mp-gradient: linear-gradient(90deg, #1976d2, #004ba0);
    --gold-gradient: linear-gradient(90deg, #ffd700, #ff8c00);
    --boss-gradient: radial-gradient(circle at center, rgba(244, 67, 54, 0.2) 0%, rgba(34, 34, 34, 0.8) 100%);

    --transition-fast: 0.15s;
    --transition-normal: 0.3s;
    --transition-slow: 0.6s;

    --shadow-main: 0 4px 15px rgba(0, 0, 0, 0.3);
    --shadow-heavy: 0 10px 30px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px rgba(100, 108, 255, 0.4);

    /* Glassmorphism & Neon */
    --surface-glass: rgba(20, 20, 25, 0.7);
    --surface-glass-bright: rgba(255, 255, 255, 0.05);
    --border-glass: rgba(255, 255, 255, 0.1);
    --neon-gold: #ffcc00;
    --neon-blue: #00d2ff;
    --neon-red: #ff3e3e;
    --neon-red: #ff3e3e;
    --blur-intensity: 15px;

    /* Z-Index Layers */
    --z-base: 1;
    --z-ui: 100;
    --z-modal-backdrop: 9990;
    --z-modal: 10000;
    --z-tooltip: 20000;
    --z-overlay: 30000;
    --z-debug: 99999;
}