:root {
    color-scheme: dark;
    font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --bg-body: #020617;
    --text-body: #f8fafc;
    --surface-card: rgba(15, 23, 42, 0.9);
    --surface-muted: rgba(15, 23, 42, 0.8);
    --border-card: rgba(248, 250, 252, 0.08);
    --shadow-card: 0 25px 55px rgba(2, 6, 23, 0.75);
    --accent: #38bdf8;
}

:root[data-theme='light'] {
    color-scheme: light;
    --bg-body: radial-gradient(circle at 20% 20%, rgba(239, 68, 68, 0.35), rgba(245, 158, 11, 0.25) 30%, rgba(16, 185, 129, 0.25) 55%, rgba(59, 130, 246, 0.3) 85%, #ffffff 95%);
    --text-body: #101828;
    --surface-card: rgba(255, 255, 255, 0.97);
    --surface-muted: rgba(255, 255, 255, 0.9);
    --border-card: rgba(239, 68, 68, 0.18);
    --shadow-card: 0 30px 60px rgba(239, 68, 68, 0.15);
    --accent: #0ea5e9;
}

.layout-body {
    background: var(--bg-body);
    color: var(--text-body);
    transition: background 0.3s ease, color 0.3s ease;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

header,
.site-header {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

:root[data-theme='light'] header,
:root[data-theme='light'] .site-header {
    background: var(--surface-muted) !important;
    border-color: rgba(37, 99, 235, 0.22) !important;
    color: #0f172a !important;
    box-shadow: 0 12px 40px rgba(37, 99, 235, 0.15);
}

:root[data-theme='dark'] .gradient-hero,
.gradient-hero {
    background: radial-gradient(circle at top, #38bdf8 0%, #0f172a 55%, #020617 100%);
}

:root[data-theme='light'] .gradient-hero {
    background: radial-gradient(circle at 20% 20%, rgba(239, 68, 68, 0.35), rgba(245, 158, 11, 0.25) 30%, rgba(16, 185, 129, 0.25) 55%, rgba(59, 130, 246, 0.3) 85%);
    color: #0f172a;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    font-size: .75rem;
    padding: .15rem .65rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    color: var(--accent);
    background-color: rgba(15, 23, 42, 0.35);
}

:root[data-theme='light'] .badge {
    color: #0f172a;
    border-color: rgba(239, 68, 68, 0.25);
    background-image: linear-gradient(120deg, rgba(239, 68, 68, 0.2), rgba(245, 158, 11, 0.2), rgba(16, 185, 129, 0.2));
}

.card-glow {
    background: var(--surface-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-card);
    border-radius: 1.5rem;
}

:root[data-theme='light'] .card-glow {
    backdrop-filter: saturate(200%) blur(16px);
    border-color: rgba(16, 185, 129, 0.25);
    box-shadow: 0 35px 55px rgba(16, 185, 129, 0.18);
}

.dark-toggle {
    border-radius: 999px;
    padding: .4rem .9rem;
    border: 1px solid rgba(148, 163, 184, 0.4);
    font-size: .8rem;
    transition: background-color .2s ease, color .2s ease;
    background: rgba(148, 163, 184, 0.12);
}

:root[data-theme='light'] .dark-toggle {
    border-color: rgba(37, 99, 235, 0.4);
    color: #0f172a;
    background-color: rgba(37, 99, 235, 0.18);
}

.plan-popular {
    border: 2px solid #38bdf8;
    transform: scale(1.01);
}

:root[data-theme='light'] .bg-slate-950,
:root[data-theme='light'] .bg-slate-950\/80,
:root[data-theme='light'] .bg-slate-900\/40,
:root[data-theme='light'] .bg-white\/5,
:root[data-theme='light'] .bg-white\/10 {
    background-color: var(--surface-muted) !important;
    color: #0f172a !important;
    border-color: rgba(37, 99, 235, 0.25) !important;
    backdrop-filter: saturate(180%) blur(18px);
}

:root[data-theme='light'] .text-white,
:root[data-theme='light'] .text-slate-50,
:root[data-theme='light'] .text-slate-100,
:root[data-theme='light'] .text-slate-200 {
    color: #0f172a !important;
}

:root[data-theme='light'] .text-slate-400,
:root[data-theme='light'] .text-slate-500 {
    color: #475569 !important;
}

:root[data-theme='light'] .text-slate-100\/70,
:root[data-theme='light'] .text-white\/80 {
    color: rgba(15, 23, 42, 0.8) !important;
}

:root[data-theme='light'] footer {
    border-color: rgba(245, 158, 11, 0.4) !important;
    background: rgba(255, 255, 255, 0.95);
}

:root[data-theme='light'] a {
    color: #2563eb;
}

:root[data-theme='light'] input,
:root[data-theme='light'] textarea,
:root[data-theme='light'] select {
    background-color: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(37, 99, 235, 0.35) !important;
    color: #0f172a !important;
    box-shadow: 0 10px 26px rgba(37, 99, 235, 0.18);
}

:root[data-theme='light'] input::placeholder,
:root[data-theme='light'] textarea::placeholder {
    color: rgba(71, 85, 105, 0.9);
}

:root[data-theme='light'] .bg-sky-400,
:root[data-theme='light'] .bg-sky-400\/90 {
    background-image: linear-gradient(90deg, #ef4444, #f97316, #22c55e, #3b82f6);
    color: #f8fafc !important;
    box-shadow: 0 20px 35px rgba(239, 68, 68, 0.25);
}

:root[data-theme='light'] .bg-rose-500\/20,
:root[data-theme='light'] .bg-rose-500\/40 {
    background-color: rgba(248, 113, 113, 0.15) !important;
    color: #0f172a !important;
}

:root[data-theme='light'] .text-white,
:root[data-theme='light'] .text-slate-50,
:root[data-theme='light'] .text-slate-100,
:root[data-theme='light'] .text-slate-200 {
    color: #0f172a !important;
}

:root[data-theme='light'] .text-slate-400,
:root[data-theme='light'] .text-slate-500 {
    color: #475569 !important;
}

:root[data-theme='light'] .text-slate-100\/70,
:root[data-theme='light'] .text-white\/80 {
    color: rgba(15, 23, 42, 0.8) !important;
}

:root[data-theme='light'] nav a {
    color: #0f172a;
}

:root[data-theme='light'] .bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.82) !important;
    color: #0f172a !important;
}

:root[data-theme='light'] .bg-white\/5 button {
    color: #0f172a !important;
}