:root {
    /* Light theme variables */
    --bg-color: #f5f5f5;
    --surface-color: #ffffff;
    --text-color: #333333;
    --text-muted: #666666;
    --border-color: #dee2e6;
    --input-bg: #ffffff;
    --shadow-color: rgba(0,0,0,0.1);
    --header-bg: #1e1e1e;
    --header-text: #ffffff;
    --card-bg: #ffffff;
    --button-bg: #e9ecef;
    --button-text: #333333;
    --hover-bg: #f8f9fa;
    --heading-color: #2c3e50;
    --modal-bg: #ffffff;
    --result-bg: #ffffff;
    --section-bg: #ffffff;
}

[data-theme="dark"] {
    /* Dark theme variables - completely dark */
    --bg-color: #121212;
    --surface-color: #1e1e1e;
    --text-color: #e0e0e0;
    --text-muted: #a0a0a0;
    --border-color: #2d2d2d;
    --input-bg: #2d2d2d;
    --shadow-color: rgba(0,0,0,0.5);
    --header-bg: #000000;
    --header-text: #e0e0e0;
    --card-bg: #1e1e1e;
    --button-bg: #2d2d2d;
    --button-text: #e0e0e0;
    --hover-bg: #333333;
    --heading-color: #e0e0e0;
    --modal-bg: #1e1e1e;
    --result-bg: #1e1e1e;
    --section-bg: #1e1e1e;
}

/* Apply dark theme to all major components */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Sections and Cards */
.welcome-section,
.random-picker,
.settings-section,
.auth-card,
.user-card,
.modal-content,
.specifications-list,
.feeling-card,
.preset-card,
.result-container {
    background-color: var(--section-bg);
    color: var(--text-color);
}

/* Results */
.random-result,
.feeling-result,
.preset-result {
    background-color: var(--result-bg);
}

/* Forms and Inputs */
input,
select,
textarea {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: var(--border-color);
}

input:focus,
select:focus,
textarea:focus {
    background-color: var(--input-bg);
    color: var(--text-color);
    border-color: #009fe3;
}

/* Modal */
.modal-content {
    background-color: var(--modal-bg);
}

/* Tables */
table {
    background-color: var(--surface-color);
    color: var(--text-color);
}

th {
    background-color: var(--header-bg);
    color: var(--header-text);
}

tr:hover {
    background-color: var(--hover-bg);
}

/* Alerts */
.alert {
    background-color: var(--surface-color);
    border-color: var(--border-color);
}

/* Specific Components */
.specifications-grid,
.users-grid,
.dashboard-container {
    background-color: var(--bg-color);
}

/* Navigation */
.dashboard-nav {
    background-color: var(--header-bg);
    color: var(--header-text);
}

.nav-links a {
    color: var(--header-text);
}

/* Buttons */
button,
.btn {
    background-color: var(--button-bg);
    color: var(--button-text);
}

/* Transitions */
body,
.welcome-section,
.random-picker,
.settings-section,
.auth-card,
.user-card,
.modal-content,
.specifications-list,
.feeling-card,
.preset-card,
.result-container,
input,
select,
textarea,
button,
.btn {
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Scrollbar for dark theme */
[data-theme="dark"] {
    scrollbar-color: #2d2d2d #121212;
}

[data-theme="dark"]::-webkit-scrollbar {
    width: 12px;
}

[data-theme="dark"]::-webkit-scrollbar-track {
    background: #121212;
}

[data-theme="dark"]::-webkit-scrollbar-thumb {
    background-color: #2d2d2d;
    border-radius: 6px;
    border: 3px solid #121212;
}

/* Additional dark mode overrides */
[data-theme="dark"] .modal,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .tooltip {
    background-color: var(--modal-bg);
    color: var(--text-color);
}

[data-theme="dark"] .card,
[data-theme="dark"] .list-group-item {
    background-color: var(--surface-color);
    color: var(--text-color);
}