/* Dark is the default theme. Light is opt-in via [data-theme="light"] on <html> or any wrapper. */
:root{
--c-surface:#070B14;--c-surface-raised:#0F172A;--c-line:#334155;
--c-ink:#F8FAFC;--c-ink-muted:#94A3B8;
--c-sky:#38BDF8;--c-sky-soft:#0C3048;--c-on-sky:#070B14;
--c-signal:#34D399;--c-danger:#F87171;

/* semantic aliases — always author against these */
--surface:var(--c-surface);--surface-raised:var(--c-surface-raised);
--surface-tint:var(--c-sky-soft);--line:var(--c-line);
--line-strong:#475569;
--text-body:var(--c-ink);--text-muted:var(--c-ink-muted);--text-on-accent:var(--c-on-sky);
--accent:var(--c-sky);--accent-soft:var(--c-sky-soft);--accent-hover:#7DD3FC;--accent-press:#0EA5E9;
--link:var(--c-sky);--link-hover:#7DD3FC;
--status-live:var(--c-signal);--status-error:var(--c-danger);

/* the single permitted glow — one element per screen */
--glow-sky:0 0 32px rgba(56,189,248,.45);
--glow-sky-soft:0 0 24px rgba(56,189,248,.22);
--focus-ring:0 0 0 2px var(--c-surface),0 0 0 4px var(--c-sky);

/* elevation: dark theme leans on hairlines, not shadow */
--shadow-card:0 1px 0 rgba(255,255,255,.04) inset;
--shadow-panel:0 24px 60px -24px rgba(2,6,16,.9);
--overlay-scrim:rgba(7,11,20,.78);
}

[data-theme="light"]{
--c-surface:#F8FAFC;--c-surface-raised:#FFFFFF;--c-line:#CBD5E1;
--c-ink:#0F172A;--c-ink-muted:#64748B;
--c-sky:#0369A1;--c-sky-soft:#E0F2FE;--c-on-sky:#FFFFFF;
--c-signal:#047857;--c-danger:#B91C1C;
--line-strong:#94A3B8;
--accent-hover:#075985;--accent-press:#0C4A6E;--link-hover:#075985;
--glow-sky:0 0 32px rgba(3,105,161,.22);
--glow-sky-soft:0 0 24px rgba(3,105,161,.12);
--focus-ring:0 0 0 2px #FFFFFF,0 0 0 4px #0369A1;
--shadow-card:0 1px 2px rgba(15,23,42,.06);
--shadow-panel:0 24px 60px -28px rgba(15,23,42,.18);
--overlay-scrim:rgba(248,250,252,.82);
}