/* Theme tokens + base styles (no Node build). */

html {
    color-scheme: dark;
    --w-surface: #0d0d0d;
    --w-surface-raised: #141416;
    --w-surface-card: #16161a;
    --w-surface-border: #26262b;
    --w-accent: #dc2626;
    --w-accent-soft: #7f1d1d;
    --w-muted: #9ca3af;
    --w-ink: #f5f5f5;
    --w-glow-a: rgba(220, 38, 38, 0.18);
    --w-glow-b: rgba(127, 29, 29, 0.12);
    --w-hover: rgba(255, 255, 255, 0.05);
    --w-select-bg: #141416;
    --w-select-text: #f5f5f5;
}

html[data-theme="light"] {
    color-scheme: light;
    --w-surface: #f4f4f5;
    --w-surface-raised: #ffffff;
    --w-surface-card: #ffffff;
    --w-surface-border: #e4e4e7;
    --w-accent: #dc2626;
    --w-accent-soft: #fecaca;
    --w-muted: #71717a;
    --w-ink: #18181b;
    --w-glow-a: rgba(220, 38, 38, 0.08);
    --w-glow-b: rgba(24, 24, 27, 0.04);
    --w-hover: rgba(24, 24, 27, 0.04);
    --w-select-bg: #ffffff;
    --w-select-text: #18181b;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    background-color: var(--w-surface);
    color: var(--w-ink);
    background-image:
        radial-gradient(ellipse 80% 50% at 10% -20%, var(--w-glow-a), transparent 55%),
        radial-gradient(ellipse 60% 40% at 100% 0%, var(--w-glow-b), transparent 50%);
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(220, 38, 38, 0.35);
}

/* Native controls — keep dark/light consistent (not OS white menus) */
select,
select.filter-chip,
select.input-dark,
input[type="date"].filter-chip,
input[type="search"].input-dark,
input[type="text"].input-dark,
input[type="email"].input-dark,
input[type="password"].input-dark,
input[type="url"].input-dark,
textarea.input-dark {
    background-color: var(--w-select-bg) !important;
    color: var(--w-select-text) !important;
    color-scheme: inherit;
}

select option,
select optgroup {
    background-color: var(--w-select-bg);
    color: var(--w-select-text);
}

html[data-theme="light"] .btn-ghost {
    border-color: var(--w-surface-border);
}

html[data-theme="light"] .hover\:bg-white\/5:hover,
html[data-theme="light"] .hover\:bg-white\/\[0\.02\]:hover {
    background-color: var(--w-hover);
}

body.has-consent-banner {
    padding-bottom: 8rem;
}

@media (min-width: 1024px) {
    body.has-consent-banner {
        padding-bottom: 6rem;
    }
}