/* Neo-Brutalism Theme - Black, White, Gray Only */

:root {
    --primary-black: #000000;
    --secondary-black: #1a1a1a;
    --dark-gray: #333333;
    --medium-gray: #666666;
    --light-gray: #cccccc;
    --off-white: #f5f5f5;
    --white: #ffffff;
    --border-width: 3px;
    --border-color: #000000;
}

/* Remove all purple colors globally */
.feature-card-1,
.feature-card-2,
.feature-card-3,
.feature-card-4,
.feature-card-5,
.feature-card-6,
.category-icon,
.category-btn,
.global-config-btn,
.nav-link-primary,
.primary-btn,
.hero-button-primary {
    background: var(--primary-black) !important;
    background-color: var(--primary-black) !important;
    color: var(--white) !important;
}

/* Hide all popup elements */
.global-config-btn,
.config-popup,
.config-modal,
.config-overlay,
[class*="popup"],
[class*="modal"],
[class*="overlay"] {
    display: none !important;
}

/* Hero buttons - neo-brutalism style */
.hero-button-primary {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--border-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    transition: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.hero-button-secondary {
    background: var(--white) !important;
    color: var(--primary-black) !important;
    border: var(--border-width) solid var(--border-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    padding: 12px 24px !important;
    transition: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.hero-button-primary:hover,
.hero-button-primary:focus,
.hero-button-primary:active {
    background: var(--white) !important;
    color: var(--primary-black) !important;
    box-shadow: none !important;
}

.hero-button-secondary:hover,
.hero-button-secondary:focus,
.hero-button-secondary:active {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

.hero-button-large {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--border-color) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 16px 32px !important;
}

/* Feature cards - clean brutalist style */
.feature-card {
    background: var(--white) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    border-radius: 0 !important;
}

.feature-card:hover {
    transform: none !important;
    background: var(--off-white) !important;
}

/* Navigation */
.nav {
    background: var(--white) !important;
    border-bottom: var(--border-width) solid var(--primary-black) !important;
}

.nav-link-secondary {
    color: var(--primary-black) !important;
    border: none !important;
}

.nav-link-secondary:hover {
    background: var(--off-white) !important;
}

.nav-divider {
    background: var(--light-gray) !important;
}

/* Forms */
.primary-btn,
.category-btn {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    padding: 12px 24px !important;
    border-radius: 0 !important;
}

.primary-btn:hover,
.category-btn:hover {
    background: var(--white) !important;
    color: var(--primary-black) !important;
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
    background: var(--white) !important;
    color: var(--primary-black) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    border-radius: 0 !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--primary-black) !important;
    box-shadow: inset 0 0 0 2px var(--primary-black) !important;
}

/* XP/Level Display - Neo-brutalism */
.xp-container,
.level-container,
.level-display {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    border-radius: 0 !important;
}

.level-badge {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--white) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
}

.xp-bar {
    background: var(--light-gray) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    border-radius: 0 !important;
}

.xp-bar-fill {
    background: var(--primary-black) !important;
    border-radius: 0 !important;
}

.rank-title {
    color: var(--primary-black) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 0.875rem !important;
}

/* Cards and containers */
.category-card,
.feature-card,
.card,
.container {
    background: var(--white) !important;
    border: var(--border-width) solid var(--primary-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.category-card:hover,
.feature-card:hover {
    transform: none !important;
    background: var(--off-white) !important;
}

/* Remove all rounded corners */
* {
    border-radius: 0 !important;
}

/* Remove all box shadows */
body,
.nav,
.feature-card,
.category-card,
button,
a[class*="button"],
a[class*="btn"],
input,
textarea,
select,
.hero-button-primary,
.hero-button-secondary,
.btn-primary,
.btn-secondary {
    box-shadow: none !important;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--primary-black) !important;
    font-weight: 700 !important;
}

/* Accessibility - High contrast */
:focus,
:focus-visible {
    outline: var(--border-width) solid var(--primary-black) !important;
    outline-offset: 2px !important;
}

/* Override all purple colors globally */
[style*="667eea"],
[style*="764ba2"],
[style*="linear-gradient"] {
    background: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
}

/* Remove all gradients except gradient-text */
.hero-background,
.animation-glow {
    background: none !important;
    background-color: transparent !important;
}

/* Keep gradient-text visible */
.gradient-text {
    background: linear-gradient(135deg, #3b82f6 0%, #10b981 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Animation wrapper - remove border frame (big square) */
.animation-wrapper {
    border: none !important;
    padding: 0 !important;
}

#atlasAnimation {
    filter: none !important;
    -webkit-filter: none !important;
}

/* Progress bars */
.progress-bar,
.progress-fill {
    background: var(--primary-black) !important;
    border: var(--border-width) solid var(--primary-black) !important;
}

/* Badges and tags */
.badge,
.tag,
.beta-badge {
    background: var(--primary-black) !important;
    color: var(--white) !important;
    border: var(--border-width) solid var(--primary-black) !important;
}

/* Hero badge - ensure proper white background */
.hero-badge {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 3px solid var(--primary-black) !important;
    color: var(--primary-black) !important;
    box-shadow: none !important;
}

/* Accessibility panel - remove if exists */
.accessibility-panel,
.accessibility-popup,
.accessibility-modal {
    display: none !important;
}

/* Reduce motion for brutalism feel */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

#atlasAnimation {
    border-radius: 50% !important;
}