:root, [data-bs-theme="light"] {
    --wx-accent: #0d6efd;
    --wx-warm: #e8590c;
    --wx-cold: #1c7ed6;
    --wx-feels: #adb5bd;
    --wx-precip: rgba(28, 126, 214, .55);
    --wx-grid: rgba(0, 0, 0, .06);
    --wx-surface: #ffffff;
    --wx-page: #f3f6fa;
    --wx-nav: linear-gradient(90deg, #0b3d91, #1971c2);
    --wx-weekend: #fff4e6;
}

[data-bs-theme="dark"] {
    --wx-accent: #74c0fc;
    --wx-warm: #ff922b;
    --wx-cold: #74c0fc;
    --wx-feels: #868e96;
    --wx-precip: rgba(116, 192, 252, .5);
    --wx-grid: rgba(255, 255, 255, .08);
    --wx-surface: #1b1f24;
    --wx-page: #121417;
    --wx-nav: linear-gradient(90deg, #0b1f3a, #123a6b);
    --wx-weekend: #2b2116;
}

body { background: var(--wx-page); }
.card { background: var(--wx-surface); border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .06); }

.site-nav { background: var(--wx-nav); }
.site-nav .navbar-brand, .site-nav .nav-link { color: #fff; }
.site-nav .nav-link:hover { color: #cfe8ff; }
.site-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); filter: invert(1); }
.site-nav .btn-outline-secondary { color: #fff; border-color: rgba(255, 255, 255, .4); }
.text-accent { color: #ffd43b; }
.search-form { min-width: 260px; }
.autocomplete-list { z-index: 1050; top: 100%; max-height: 360px; overflow: auto; }

.site-footer { background: var(--wx-surface); border-top: 1px solid var(--bs-border-color); }

.text-warm { color: var(--wx-warm); }
.text-cold { color: var(--wx-cold); }
.text-precip { color: var(--wx-cold); }

.wx-icon { display: inline-block; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.wx-sm { font-size: 1.15rem; }
.wx-md { font-size: 1.6rem; }
.wx-lg { font-size: 2.2rem; }
.wx-xl { font-size: 4rem; }

.now-temp { font-size: 3.4rem; font-weight: 700; line-height: 1; }
.now-details dt { font-weight: 400; color: var(--bs-secondary-color); }
.now-details dd { font-weight: 600; }

.hour-cell { min-width: 64px; padding: .5rem .25rem; border-radius: .5rem; background: var(--wx-page); }
.wind-arrow { display: inline-block; transform: rotate(var(--deg)); color: var(--bs-secondary-color); }

.chart-wrap { position: relative; height: 260px; }

.period-tabs .nav-link { color: var(--bs-body-color); }
.period-tabs .nav-link.active { background: var(--wx-accent); color: #fff; }
[data-bs-theme="dark"] .period-tabs .nav-link.active { color: #000; }

.day-card { color: var(--bs-body-color); transition: transform .12s; }
.day-card:hover, .city-card:hover { transform: translateY(-2px); }
.day-card.weekend { background: var(--wx-weekend); }
.city-card { color: var(--bs-body-color); transition: transform .12s; }

.stat { text-align: center; }
.stat-label { font-size: .8rem; color: var(--bs-secondary-color); display: block; }
.stat-value { font-size: 1.5rem; font-weight: 700; }

.hourly-table .day-row th { background: var(--wx-page); }
.table { --bs-table-bg: transparent; }

/* Bootstrap stops at row-cols-6; the week needs 7 columns. */
@media (min-width: 992px) {
    .row-cols-lg-7 > * { flex: 0 0 auto; width: calc(100% / 7); }
}