html {
    color-scheme: dark;
}

html.theme-light {
    color-scheme: light;
}

:root {
    --sidebar-width: 320px;
    --gruvbox-bg: #f6f8fa;
    --gruvbox-bg-soft: #ffffff;
    --gruvbox-surface: #ffffff;
    --gruvbox-border: #d0d7de;
    --gruvbox-text: #24292f;
    --gruvbox-muted: #57606a;
    --gruvbox-accent: #0969da;
    --gruvbox-accent-strong: #1f6feb;
    --gruvbox-highlight: #1f6feb;
    --gruvbox-highlight-soft: rgba(9, 105, 218, 0.1);
    --gruvbox-success: #1a7f37;
    --gruvbox-danger: #cf222e;
    --gruvbox-ring: rgba(9, 105, 218, 0.25);
    --gruvbox-nav-border: #d0d7de;
    --brand-contrast: #ffffff;
    --shadow-elevation: 0 8px 24px rgba(140, 149, 159, 0.2);
}

html.theme-dark {
    --gruvbox-bg: #0d1117;
    --gruvbox-bg-soft: #161b22;
    --gruvbox-surface: #1c2128;
    --gruvbox-border: #30363d;
    --gruvbox-text: #c9d1d9;
    --gruvbox-muted: #8b949e;
    --gruvbox-accent: #1f6feb;
    --gruvbox-accent-strong: #388bfd;
    --gruvbox-highlight: #58a6ff;
    --gruvbox-highlight-soft: rgba(56, 139, 253, 0.18);
    --gruvbox-success: #3fb950;
    --gruvbox-danger: #f85149;
    --gruvbox-ring: rgba(56, 139, 253, 0.35);
    --gruvbox-nav-border: #30363d;
    --brand-contrast: #f0f6fc;
    --shadow-elevation: 0 8px 24px rgba(1, 4, 9, 0.6);
}

body {
    background-color: var(--gruvbox-bg);
    color: var(--gruvbox-text);
    transition: background-color 0.3s ease, color 0.3s ease;
    display: flex;
}

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--gruvbox-bg-soft);
    border-right: 1px solid var(--gruvbox-nav-border);
    padding: 1.5rem;
    overflow-y: auto;
}

.main-content {
    margin-left: var(--sidebar-width);
    padding: 2rem;
    width: calc(100% - var(--sidebar-width));
}

.card, .info-card, .stat-card, .error-card, .legend,
.modal-content, .map-container, .generation-plot, .info-panel, .feature-card {
    background-color: var(--gruvbox-surface) !important;
    border: 1px solid var(--gruvbox-border) !important;
    box-shadow: var(--shadow-elevation) !important;
    color: var(--gruvbox-text) !important;
}

.table, .table th, .table td {
    background-color: var(--gruvbox-surface) !important;
    color: var(--gruvbox-text) !important;
    border-color: var(--gruvbox-border) !important;
}

.table-hover > tbody > tr:hover {
    background-color: var(--gruvbox-highlight-soft) !important;
    color: var(--gruvbox-text) !important;
}

.table thead {
    background-color: var(--gruvbox-bg-soft) !important;
}

.text-muted {
    color: var(--gruvbox-muted) !important;
}

.btn-primary {
    background-color: var(--gruvbox-accent) !important;
    border-color: var(--gruvbox-accent) !important;
    color: var(--brand-contrast) !important;
}

.btn-primary:hover {
    background-color: var(--gruvbox-accent-strong) !important;
    border-color: var(--gruvbox-accent-strong) !important;
}

.nav-tabs .nav-link {
    color: var(--gruvbox-text);
    background-color: transparent;
    border-bottom: 2px solid transparent;
}

.nav-tabs .nav-link.active {
    color: var(--gruvbox-accent);
    background-color: var(--gruvbox-highlight-soft);
    border-color: var(--gruvbox-accent);
}

.form-control, .form-select {
    background-color: var(--gruvbox-surface) !important;
    color: var(--gruvbox-text) !important;
    border: 1px solid var(--gruvbox-border) !important;
}

.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 0.25rem var(--gruvbox-ring) !important;
    border-color: var(--gruvbox-accent) !important;
}

.theme-toggle-btn .icon-sun { display: none; }
html.theme-light .theme-toggle-btn .icon-moon { display: none; }
html.theme-light .theme-toggle-btn .icon-sun { display: inline; }
html.theme-dark .theme-toggle-btn .icon-moon { display: inline; }

a {
    color: var(--gruvbox-accent);
}

a:hover {
    color: var(--gruvbox-highlight);
}

.text-primary { color: var(--gruvbox-accent) !important; }
.text-success { color: var(--gruvbox-success) !importan; }
.text-danger { color: var(--gruvbox-danger) !important; }

.text-link-1 { color: #fb4934 !important; }
.gem-detail-expander {
    background-color: var(--gruvbox-surface) !important;
    color: var(--gruvbox-text) !important;
}

.gem-detail-expando {
    background-color: var(--gruvbox-surface-strong);
    border: 1px solid var(--gruvbox-border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.75rem;
    color: inherit;
}

.gem-detail-expando[open] {
    background-color: var(--gruvbox-surface);
}

.gem-detail-summary {
    cursor: pointer;
    color: var(--brand-primary);
}

.gem-detail-summary:hover,
.gem-detail-summary:focus {
    color: var(--gruvbox-accent-strong);
}

.gem-detail-content {
    color: var(--gruvbox-text);
}
.text-link-2 { color: #fe8019 !important; }
.text-link-3 { color: #fabd2f !important; }
.text-link-4 { color: #b8bb26 !important; }
.text-link-5 { color: #8ec07c !important; }
.text-link-6 { color: #83a598 !important; }
.text-link-7 { color: #d3869b !important; }
.text-link-8 { color: #d65d0e !important; }
.text-link-9 { color: #689d6a !important; }
.text-link-10 { color: #a89984 !important; }
.text-link-11 { color: #cc241d !important; }
.text-link-12 { color: #928374 !important; }

.notes-history-list {
    max-height: 12.5rem;
    overflow-y: auto;
    background-color: var(--gruvbox-surface);
    border: 1px solid var(--gruvbox-border);
    border-radius: 0.75rem;
}

.notes-history-item {
    background-color: transparent;
    color: var(--gruvbox-text);
    border: 0;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.notes-history-item:hover,
.notes-history-item:focus {
    background-color: var(--gruvbox-highlight-soft);
    color: var(--gruvbox-text);
}

.notes-history-item.active {
    background-color: var(--gruvbox-highlight);
    color: var(--brand-contrast);
}