:root {
    /* Pixel art color palette - NEON PURPLE UPDATE */
    --color-background: #0a0e27;
    --color-surface: #1a1f3a;
    --color-purple: #d946ff;
    --color-neon-blue: #00d9ff;
    
    /* Pixel colors */
    --pixel-bg-dark: #0a0e27;
    --pixel-bg-medium: #1a1f3a;
    --pixel-bg-light: #2a2f4a;
    --pixel-border: #3a4f6a;
    --pixel-accent: #00d9ff;
    --pixel-accent-dark: #0099cc;
    --pixel-purple: #d946ff;
    --pixel-purple-dark: #a020f0;
    --pixel-pink: #ff6ec7;
    --pixel-green: #00ff88;
    --pixel-yellow: #ffed4e;
    --pixel-red: #ff4757;
    --pixel-text: #e8f1ff;
    --pixel-text-dim: #8b9bb4;
    
    /* Legacy colors (mapped to pixel palette) */
    --color-blue: #00d9ff;
    --color-yellow: #ffed4e;
    --color-white: #e8f1ff;
    --color-green: #00ff88;
    --color-red: #ff4757;
    --color-dark: #1a1f3a;
    --color-grey: #8b9bb4;
    --color-darker-grey: #2a2f4a;

    --bs-primary: #d946ff;
    --bs-primary-rgb: 217, 70, 255;
    --bs-success: var(--pixel-green);
    --bs-danger: var(--pixel-red);
    --bs-warning: var(--pixel-yellow);
}

.color-blue {
    color: var(--color-blue);
}

.color-purple {
    color: var(--color-purple);
}

.color-yellow {
    color: var(--color-yellow);
}

.color-white {
    color: var(--color-white);
}

.color-green {
    color: var(--color-green);
}

.color-red {
    color: var(--color-red);
}

.color-grey {
    color: var(--color-grey);
}

.color-neon-blue {
    color: var(--color-neon-blue);
}

.bg-background {
    background-color: var(--color-background) !important;
}

.bg-surface {
    background-color: var(--color-surface) !important;
}

.bg-dark {
    background-color: var(--color-dark) !important;
}

.bg-primary {
    background-color: var(--color-purple) !important;
}

.bg-green {
    background-color: var(--color-green) !important;
}

.btn-primary {
    --bs-btn-bg: #d946ff;
    --bs-btn-border-color: #a020f0;
    --bs-btn-hover-bg: #ff6bff;
    --bs-btn-hover-border-color: #d946ff;
    --bs-btn-active-bg: #a020f0;
    --bs-btn-active-border-color: #7a0fc0;
    background-color: #d946ff !important;
    border-color: #a020f0 !important;
    color: #0a0e27 !important;
}

.btn-secondary {
    --bs-btn-bg: var(--color-grey);
    --bs-btn-border-color: var(--color-grey);
    --bs-btn-hover-bg: shade-color(var(--color-grey), 10%);
    --bs-btn-hover-border-color: shade-color(var(--color-grey), 10%);
    --bs-btn-active-bg: shade-color(var(--color-grey), 20%);
    --bs-btn-active-border-color: shade-color(var(--color-grey), 20%);
    --bs-btn-hover-color: var(--color-grey);
}

.btn-success {
    --bs-btn-bg: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: shade-color(var(--bs-success), 10%);
    --bs-btn-hover-border-color: shade-color(var(--bs-success), 10%);
    --bs-btn-active-bg: shade-color(var(--bs-success), 20%);
    --bs-btn-active-border-color: shade-color(var(--bs-success), 20%);
}

.btn-danger {
    --bs-btn-bg: var(--bs-danger);
    --bs-btn-border-color: var(--bs-danger);
    --bs-btn-hover-bg: shade-color(var(--bs-danger), 10%);
    --bs-btn-hover-border-color: shade-color(var(--bs-danger), 10%);
    --bs-btn-active-bg: shade-color(var(--bs-danger), 20%);
    --bs-btn-active-border-color: shade-color(var(--bs-danger), 20%);
}

.btn-warning {
    --bs-btn-bg: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-bg: shade-color(var(--bs-warning), 10%);
    --bs-btn-hover-border-color: shade-color(var(--bs-warning), 10%);
    --bs-btn-active-bg: shade-color(var(--bs-warning), 20%);
    --bs-btn-active-border-color: shade-color(var(--bs-warning), 20%);
}

.alert-danger {
    --bs-alert-bg: var(--color-dark);
    --bs-alert-border-color: var(--color-dark);
    --bs-alert-color: var(--color-red);
}

.progress {
    --bs-progress-bg: var(--color-grey);
}

.progress-bar {
    --bs-progress-bar-bg: #d946ff;
    background-color: #d946ff !important;
}