/* theme.css — extracted from index.html (Phase: CSS modularization).
Load order theme -> layout -> components -> mobile is load-bearing (cascade). */
:root{
/* Surfaces — lifted for separation against the near-black aurora base.
Each step is intentionally distinct: ink (bg) < ink2 (inputs) < panel (cards) < panel2 (raised). */
--ink:#08080f; --ink2:#101019; --panel:#17172a; --panel2:#20203a;
/* Borders — strengthened so cards read as cards, not floating text. */
--line:rgba(255,255,255,.11); --line2:rgba(255,255,255,.20);
/* Text ramp — muted/faint raised for legibility (they label most of the UI). */
--text:#ECECF4; --muted:#aeaecb; --faint:#8a8aa8;
/* Code surfaces (rendered markdown) — tokenised so light mode can flip them. */
--code-bg:#0b0b16; --code-text:#e7e3ff; --code-inline-bg:rgba(124,92,255,.16); --code-inline-text:#dcd2ff;
--ring-track:#1e1e30; --scroll-thumb:#23233a;
--violet:#7c5cff; --cyan:#22d3ee; --lime:#86ff6b; --amber:#f5b544; --rose:#ff6b8b;
--grad:linear-gradient(120deg,var(--violet),var(--cyan));
--grad2:linear-gradient(120deg,var(--cyan),var(--lime));
--radius:18px; --sb:248px;
/* Spacing tokens — use these instead of ad-hoc margins */
--sp-xs:8px; --sp-sm:12px; --sp-md:20px; --sp-lg:28px; --sp-xl:40px;
--card-pad:22px;
}
/* ============================================================
LIGHT THEME — applied via (ThemeManager).
Dark stays the default :root above. Light keeps the violet/cyan
identity but deepens accents just enough to read on light surfaces.
============================================================ */
:root[data-theme="light"]{
--ink:#eef1f8; --ink2:#ffffff; --panel:#ffffff; --panel2:#f3f5fb;
--line:rgba(20,22,55,.12); --line2:rgba(20,22,55,.20);
--text:#15161f; --muted:#52546a; --faint:#797b92;
--code-bg:#f3f2fb; --code-text:#3a2c66; --code-inline-bg:rgba(106,64,255,.10); --code-inline-text:#5a3ec8;
--ring-track:#e4e6f0; --scroll-thumb:#cdd2e6;
--violet:#6a40ff; --cyan:#0e9bc0; --lime:#2f9e2a; --amber:#bd7d0a; --rose:#e0436a;
}
:root[data-theme="light"] .aurora{background:
radial-gradient(1200px 700px at 12% -10%, rgba(124,92,255,.12), transparent 60%),
radial-gradient(1000px 600px at 95% 0%, rgba(34,211,238,.10), transparent 55%),
radial-gradient(900px 700px at 60% 120%, rgba(134,255,107,.08), transparent 55%),
var(--ink);}
:root[data-theme="light"] .aurora b{opacity:.14}
:root[data-theme="light"] .rail{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(244,246,251,.72))}
:root[data-theme="light"] .topbar{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.6))}
:root[data-theme="light"] .bnav{background:rgba(255,255,255,.96)}
/* component literals that assumed a dark surface */
:root[data-theme="light"] .goal-chip,
:root[data-theme="light"] .sm2-opt{color:var(--text)}
:root[data-theme="light"] .pchip .pill{color:var(--violet)}
:root[data-theme="light"] .toast{background:rgba(255,255,255,.97);color:var(--text)}
:root[data-theme="light"] .ach.unlocked.t-silver{border-color:#9aa3b8}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
font-family:'Hanken Grotesk',sans-serif; color:var(--text);
background:var(--ink); overflow:hidden; -webkit-font-smoothing:antialiased;
}
/* ---------- atmospheric background ---------- */
.aurora{position:fixed;inset:0;z-index:-2;overflow:hidden;background:
radial-gradient(1200px 700px at 12% -10%, rgba(124,92,255,.20), transparent 60%),
radial-gradient(1000px 600px at 95% 0%, rgba(34,211,238,.14), transparent 55%),
radial-gradient(900px 700px at 60% 120%, rgba(134,255,107,.10), transparent 55%),
var(--ink);}
.aurora b{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5;animation:float 18s ease-in-out infinite}
.aurora b:nth-child(1){width:420px;height:420px;background:var(--violet);top:-120px;left:-80px}
.aurora b:nth-child(2){width:360px;height:360px;background:var(--cyan);bottom:-120px;right:8%;animation-delay:-6s}
.aurora b:nth-child(3){width:300px;height:300px;background:var(--lime);top:40%;left:46%;opacity:.25;animation-delay:-11s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(30px,-26px) scale(1.08)}}
.grain{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");}