/* theme.css — extracted from index.html (Phase: CSS modularization). Load order theme -> layout -> components -> mobile is load-bearing (cascade). */ /* The hidden attribute must ALWAYS win. Without this, any rule like .pg-challenge{display:flex} silently overrides [hidden] (author display beats the UA default) and "hidden" elements render as empty ghost boxes. */ [hidden]{display:none !important} :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; /* Code Lab syntax tokens (CodeMirror) — flipped by light mode below. */ --cm-kw:#c792ea; --cm-str:#a5e07a; --cm-num:#ffca85; --cm-com:#5f6c8c; --cm-def:#82aaff; --cm-type:#7fdbca; --cm-op:#9aa8c7; --ring-track:#1e1e30; --scroll-thumb:#23233a; /* WCAG note (tools/audit_contrast.py): #7c5cff was mid-luminance — 4.05:1 as text on panel AND 4.35:1 under white button text (both AA fails). Split the duty: text-violet lightened to #8a6dff (4.79:1 on panel), the gradient's violet stop deepened to #6b46f5 (white 5.49:1). Same electric identity. */ --violet:#8a6dff; --cyan:#22d3ee; --lime:#86ff6b; --amber:#f5b544; --rose:#ff6b8b; --badge:#e11d48; /* notification/duel badge bg — white numerals 4.70:1 (rose was 2.72:1) */ --grad:linear-gradient(120deg,#6b46f5,var(--cyan)); --grad2:linear-gradient(120deg,var(--cyan),var(--lime)); /* Text color on primary (gradient) buttons — archetypes with bright accent ramps (Grinder amber) flip this dark to keep WCAG contrast on .btn-p. */ --btn-fg:#fff; --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); /* WCAG AA sweep (tools/audit_contrast.py): faint was 4.15:1 on white; the accent-as-text colors (lime/amber/cyan/rose) all sat 3.2–4.1:1 on light surfaces. Deepened to clear 4.5:1 everywhere they appear as text, same hues. */ --text:#15161f; --muted:#52546a; --faint:#67697f; --code-bg:#f3f2fb; --code-text:#3a2c66; --code-inline-bg:rgba(106,64,255,.10); --code-inline-text:#5a3ec8; --cm-kw:#7c3aed; --cm-str:#15803d; --cm-num:#b45309; --cm-com:#8a94ab; --cm-def:#1d4ed8; --cm-type:#0f766e; --cm-op:#52607a; --ring-track:#e4e6f0; --scroll-thumb:#cdd2e6; --violet:#6a40ff; --cyan:#0a7290; --lime:#1f7a1b; --amber:#96630a; --rose:#c22c55; } :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} /* White text was hardcoded on translucent/ghost surfaces (fine on dark, invisible on light). Re-point active/hover states to readable colors so they stay visible. */ :root[data-theme="light"] .btn-g{color:var(--text)} :root[data-theme="light"] .btn-g:hover{color:var(--violet)} :root[data-theme="light"] .nav button.on{color:var(--violet)} :root[data-theme="light"] .day.today .lbl{color:var(--text)} :root[data-theme="light"] .suggest button:hover{color:var(--violet)} :root[data-theme="light"] .path-tabs button.on{color:var(--violet)} :root[data-theme="light"] .cmdk .item.sel, :root[data-theme="light"] .cmdk .item:hover{color:var(--text)} :root[data-theme="light"] .goal-chip.on{color:var(--violet)} /* ============================================================ ARCHETYPE ACCENT THEMES — applied via (set pre-paint from localStorage 'cai-arch', synced from the profile). Source of truth: design-tokens.json at the repo root. INNOVATOR is the product's default identity (electric violet #7c5cff + neon cyan #22d3ee) — it needs no override block; absence of data-arch or data-arch="innovator" both resolve to the :root values above. Only ACCENTS retint (buttons, chips, glows, aurora, focus). Surfaces, text ramp, spacing and semantic colors (lime/amber/rose) stay shared, so no layout or meaning can break. Order matters: these sit AFTER the light block; the [data-theme="light"][data-arch] combos below out-rank both single-attribute blocks. ============================================================ */ /* GRINDER — hardcore dark, intense amber/orange. Primary buttons carry DARK text: white on this amber ramp is ~3.8:1 (fails AA), #241102 is ~6:1. */ :root[data-arch="grinder"]{ --violet:#ffa229; --cyan:#ff6a3d; --grad:linear-gradient(120deg,#ffa229,#ff6a3d); --grad2:linear-gradient(120deg,#ff6a3d,#ffd166); --btn-fg:#241102; --code-inline-bg:rgba(255,162,41,.14); --code-inline-text:#ffd9a3; } :root[data-arch="grinder"] .aurora{background: radial-gradient(1200px 700px at 12% -10%, rgba(255,162,41,.16), transparent 60%), radial-gradient(1000px 600px at 95% 0%, rgba(255,106,61,.12), transparent 55%), radial-gradient(900px 700px at 60% 120%, rgba(255,209,102,.08), transparent 55%), var(--ink);} /* DREAMER — deep nebula purples, soft flow. Button ramp uses the DEEP stops (#7c3aed→#9333ea, white ≥5:1); text accents use the softer lavender. */ :root[data-arch="dreamer"]{ --violet:#9d7bff; --cyan:#c084fc; --grad:linear-gradient(120deg,#7c3aed,#9333ea); --grad2:linear-gradient(120deg,#c084fc,#9d7bff); --code-inline-bg:rgba(157,123,255,.16); --code-inline-text:#e2d5ff; } :root[data-arch="dreamer"] .aurora{background: radial-gradient(1200px 700px at 12% -10%, rgba(157,123,255,.20), transparent 60%), radial-gradient(1000px 600px at 95% 0%, rgba(192,132,252,.13), transparent 55%), radial-gradient(900px 700px at 60% 120%, rgba(124,58,237,.10), transparent 55%), var(--ink);} /* Light-mode variants — deepen the accent ramps for light surfaces (same move the base light theme makes). White button text passes on both deep ramps. */ :root[data-theme="light"][data-arch="grinder"]{ --violet:#a54c08; --cyan:#c2410c; /* #b45309 was 4.44:1 as text on light ink */ --grad:linear-gradient(120deg,#a54c08,#c2410c); --grad2:linear-gradient(120deg,#c2410c,#a54c08); --btn-fg:#fff; --code-inline-bg:rgba(180,83,9,.10); --code-inline-text:#92400e; } :root[data-theme="light"][data-arch="dreamer"]{ --violet:#6d28d9; --cyan:#7e22ce; --grad:linear-gradient(120deg,#6d28d9,#7e22ce); --grad2:linear-gradient(120deg,#7e22ce,#6d28d9); --code-inline-bg:rgba(109,40,217,.10); --code-inline-text:#5b21b6; } *{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");}