/*
 * Barevné režimy portálu.
 * style.css zůstává společný, tento soubor pouze přepisuje barvy.
 */

html {
    --page-bg: #f3f4f6;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --surface-muted: #f3f4f6;
    --text: #1f2937;
    --text-soft: #475569;
    --muted: #64748b;
    --faint: #94a3b8;
    --border: #e5e7eb;
    --input-border: #cbd5e1;
    --link: #b45309;
    --shadow: rgba(0, 0, 0, 0.05);
    --warning-bg: #fff7ed;
    --warning-text: #9a3412;
    --success-bg: #dcfce7;
    --success-text: #166534;
    --error-bg: #fee2e2;
    --error-text: #991b1b;
    --badge-bg: #fef3c7;
    color-scheme: light;
}

html[data-theme="dark"] {
    --page-bg: #0f141b;
    --surface: #171e27;
    --surface-soft: #111821;
    --surface-muted: #222b36;
    --text: #e7edf4;
    --text-soft: #c4cfdb;
    --muted: #9baabc;
    --faint: #78889a;
    --border: #303b48;
    --input-border: #445263;
    --link: #f3a83b;
    --shadow: rgba(0, 0, 0, 0.28);
    --warning-bg: #352419;
    --warning-text: #fdba74;
    --success-bg: #123322;
    --success-text: #86efac;
    --error-bg: #3a1b20;
    --error-text: #fca5a5;
    --badge-bg: #3b3018;
    color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
    html[data-theme="system"] {
        --page-bg: #0f141b;
        --surface: #171e27;
        --surface-soft: #111821;
        --surface-muted: #222b36;
        --text: #e7edf4;
        --text-soft: #c4cfdb;
        --muted: #9baabc;
        --faint: #78889a;
        --border: #303b48;
        --input-border: #445263;
        --link: #f3a83b;
        --shadow: rgba(0, 0, 0, 0.28);
        --warning-bg: #352419;
        --warning-text: #fdba74;
        --success-bg: #123322;
        --success-text: #86efac;
        --error-bg: #3a1b20;
        --error-text: #fca5a5;
        --badge-bg: #3b3018;
        color-scheme: dark;
    }
}

html,
body {
    background: var(--page-bg);
    color: var(--text);
}

a {
    color: var(--link);
}

.topbar,
.card {
    background: var(--surface);
    border-color: var(--border);
}

.card {
    box-shadow: 0 8px 30px var(--shadow);
}

input,
select,
textarea {
    background: var(--surface);
    color: var(--text);
    border-color: var(--input-border);
}

input::placeholder,
textarea::placeholder {
    color: var(--faint);
}

fieldset,
.user-card,
.weather-day,
.rss-item {
    border-color: var(--border);
}

.muted,
.user-meta,
.weather-location span,
.weather-day small,
.rss-meta,
.rss-item p {
    color: var(--muted);
}

.weather-description {
    color: var(--text-soft);
}

.weather-details {
    background: var(--surface-soft);
}

.weather-details span {
    color: var(--muted);
}

.weather-details strong,
.rss-item h3 a {
    color: var(--text);
}

.weather-footer {
    color: var(--faint);
}

.time-tabs button {
    background: var(--surface-muted);
    color: var(--text);
}

.time-tabs button.active,
button:not(.danger),
.button {
    background: #f59e0b;
    color: #111827;
}

.badge {
    background: var(--badge-bg);
    color: var(--text);
}

.message.error {
    background: var(--error-bg);
    color: var(--error-text);
}

.message.success {
    background: var(--success-bg);
    color: var(--success-text);
}

.rss-errors {
    background: var(--warning-bg);
    color: var(--warning-text);
}

.private {
    border-color: #f59e0b;
}