:root {
    --page-background: #ffffff;
    --card-background: #ffffff;
    --primary-text: #1a1a1a;
    --secondary-text: #666666;
    --description-text: #333333;
    --separator-color: rgba(0, 0, 0, 0.15);
    --navbar-background: transparent;
    --navbar-surface: #f8f8f8;
    --navbar-text: var(--primary-text);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --page-background: #121212;
    --card-background: #1C1C1E;
    --primary-text: #f9fafb;
    --secondary-text: #d1d5db;
    --description-text: #d1d5db;
    --separator-color: rgba(255, 255, 255, 0.18);
    --navbar-background: #121212;
    --navbar-surface: #1f1f1f;
    --navbar-text: #f9fafb;
}

body {
    background-color: var(--page-background) !important;
    color: var(--primary-text);
}

:root[data-theme="dark"] .header-with-topbar .top-bar,
:root[data-theme="dark"] .header-with-topbar .navbar .dropdown-menu {
    background-color: var(--navbar-surface) !important;
}

:root[data-theme="dark"] .header-with-topbar .navbar {
    background-color: var(--navbar-background) !important;
}

:root[data-theme="dark"] .header-with-topbar .top-bar,
:root[data-theme="dark"] .header-with-topbar .top-bar p,
:root[data-theme="dark"] .header-with-topbar .top-bar a,
:root[data-theme="dark"] .header-with-topbar .navbar-brand span,
:root[data-theme="dark"] .header-with-topbar .navbar .nav-link,
:root[data-theme="dark"] .header-with-topbar .navbar .dropdown-toggle,
:root[data-theme="dark"] .header-with-topbar .navbar .dropdown-menu a,
:root[data-theme="dark"] .header-with-topbar .navbar .dropdown-menu p {
    color: var(--navbar-text) !important;
}

:root[data-theme="dark"] .header-with-topbar .navbar .navbar-toggler-line {
    background-color: var(--navbar-text) !important;
}

@media (min-width: 992px) {
    :root[data-theme="dark"] .header-with-topbar .menu-new-bar {
        background: var(--navbar-surface) !important;
        border: 1px solid #353535;
    }
}

:root[data-theme="dark"] .theme-card {
    border: 1px solid #353535;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

:root[data-theme="dark"] .theme-card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}