/* Global design tokens — light/dark via data-theme (set by theme.js) */
:root,
[data-theme="light"] {
    /* Site palette (Tailwind bundles, marketing.css) */
    --site-bg: #f4f9fb;
    --site-surface: #ffffff;
    --site-surface-muted: #f9fafb;
    --site-text: #1f2937;
    --site-text-muted: #6b7280;
    --site-border: #e5e7eb;
    --site-header-bg: rgba(255, 255, 255, 0.95);
    --site-nav-bg: #ffffff;
    --season-accent: #fbcfe8;
    --season-yellow: #ffc800;
    --season-yellow-dark: #e5b400;
    --season-pink: #f472b6;
    /* Semantic aliases */
    --bg-color: var(--site-bg);
    --surface-color: var(--site-surface);
    --surface-muted: var(--site-surface-muted);
    --text-color: var(--site-text);
    --text-muted: var(--site-text-muted);
    --border-color: var(--site-border);
    --btn-primary-bg: #1cb0f6;
    --btn-primary-text: #ffffff;
    --btn-primary-shadow: #1899d6;
    --btn-success-bg: #58cc02;
    --btn-success-text: #ffffff;
    --btn-success-shadow: #46a302;
    --btn-danger-bg: #ff4b4b;
    --btn-danger-text: #ffffff;
    --btn-muted-bg: #f3f4f6;
    --btn-muted-text: #374151;
}

[data-theme="dark"] {
    --site-bg: #0c1222;
    --site-surface: #1e293b;
    --site-surface-muted: #334155;
    --site-text: #f1f5f9;
    --site-text-muted: #94a3b8;
    --site-border: #334155;
    --site-header-bg: rgba(15, 23, 42, 0.94);
    --site-nav-bg: #1e293b;
    --bg-color: var(--site-bg);
    --surface-color: var(--site-surface);
    --surface-muted: var(--site-surface-muted);
    --text-color: var(--site-text);
    --text-muted: var(--site-text-muted);
    --border-color: var(--site-border);
    --btn-primary-bg: #38bdf8;
    --btn-primary-text: #0f172a;
    --btn-primary-shadow: #0284c7;
    --btn-success-bg: #65d006;
    --btn-success-text: #0f172a;
    --btn-success-shadow: #46a302;
    --btn-danger-bg: #f87171;
    --btn-danger-text: #0f172a;
    --btn-muted-bg: #334155;
    --btn-muted-text: #f1f5f9;
}

[data-season="spring"] { --season-accent: #fbcfe8; --season-yellow: #ffc800; --season-yellow-dark: #e5b400; --season-pink: #f472b6; }
[data-season="summer"] { --season-accent: #fef08a; --season-yellow: #facc15; --season-yellow-dark: #ca8a04; --season-pink: #fda4af; }
[data-season="autumn"] { --season-accent: #fed7aa; --season-yellow: #ea580c; --season-yellow-dark: #c2410c; --season-pink: #fb923c; }
[data-season="winter"] { --season-accent: #bae6fd; --season-yellow: #38bdf8; --season-yellow-dark: #0284c7; --season-pink: #a5f3fc; }
[data-season="rain"] { --season-accent: #93c5fd; --season-yellow: #60a5fa; --season-yellow-dark: #2563eb; --season-pink: #818cf8; }
[data-season="space"] { --season-accent: #a8b4c8; --season-yellow: #94a3b8; --season-yellow-dark: #64748b; --season-pink: #94a3b8; }

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

.bg-brand-blue,
.btn-tactile.bg-brand-blue {
    background-color: var(--btn-primary-bg) !important;
    color: var(--btn-primary-text) !important;
    box-shadow: 0 4px 0 var(--btn-primary-shadow);
}

.bg-brand-green,
.btn-tactile.bg-brand-green {
    background-color: var(--btn-success-bg) !important;
    color: var(--btn-success-text) !important;
    box-shadow: 0 4px 0 var(--btn-success-shadow);
}

.bg-brand-red,
.btn-tactile.bg-red-50.text-brand-red {
    /* keep soft danger buttons readable */
}

.modal-content,
#main-header {
    background-color: var(--surface-color);
    color: var(--text-color);
}

@media (min-width: 768px) {
    #main-nav {
        background-color: var(--surface-color);
        color: var(--text-color);
    }
}