html, body, .main-content, .container, .container-fluid, section, header, footer {
    background: var(--darker-bg) !important;
    color: var(--text-on-dark) !important;
}


a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color var(--transition-speed);
}

    a:hover, a:focus {
        color: var(--white);
        text-decoration: underline;
    }

h1, h2, h3, h4, h5, h6 {
    color: var(--white);
    font-weight: 700;
    letter-spacing: 0.01em;
}

section {
    background: var(--darker-bg);
    color: var(--text-on-dark);
}

.main-content {
    background: var(--darker-bg);
    color: var(--text-on-dark);
    min-height: 100vh;
}

::-webkit-scrollbar {
    width: 8px;
    background: var(--surface-color);
}

::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

.fade-in, .slide-up {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.7s forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: none;
    }
}

/* Utility classes */
.text-muted {
    color: var(--text-muted) !important;
}

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

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

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