/* Light theme. Only the variables change — every component already reads from them, so no component CSS needed touching. Applied via data-theme on . */ [data-theme="light"] { --ink:#F4F6FB; --surface:#FFFFFF; --surface-2:#FFFFFF; --track:#E3E8F2; --line:#DDE3EE; --line-strong:#C2CBDC; --text:#111827; --muted:#5A6678; /* Accents are darkened from their dark-theme values — the originals were tuned for contrast against near-black and fail WCAG on white. */ --green:#15803D; --cyan:#0369A1; --purple:#6D28D9; --amber:#B45309; --red:#B91C1C; --signal:#15803D; --warn:#B45309; --bad:#B91C1C; --good:#15803D; --great:#15803D; } /* Cards sit on a tinted page, so they need a border and a little lift to separate — in dark mode the surface colour alone was enough. */ [data-theme="light"] .card, [data-theme="light"] .panel, [data-theme="light"] .mcard, [data-theme="light"] .pcard, [data-theme="light"] .pkcard, [data-theme="light"] .step, [data-theme="light"] .fcard, [data-theme="light"] .strip-item, [data-theme="light"] .shell, [data-theme="light"] details, [data-theme="light"] .intro, [data-theme="light"] .vstrip, [data-theme="light"] .ringcard, [data-theme="light"] .dash-bal, [data-theme="light"] .dash-last, [data-theme="light"] .rpt-foot { box-shadow: 0 1px 2px rgba(16, 24, 40, .05); } /* Inner wells were "darker than the card"; on white they must be lighter-grey than the card instead, or they vanish. */ [data-theme="light"] .tile, [data-theme="light"] .numtile, [data-theme="light"] .hcard, [data-theme="light"] .wcard, [data-theme="light"] .cbox, [data-theme="light"] .fact, [data-theme="light"] .quote, [data-theme="light"] .fix-txt, [data-theme="light"] .fix-ico, [data-theme="light"] .crow, [data-theme="light"] .hrow, [data-theme="light"] .drop, [data-theme="light"] .tabs, [data-theme="light"] .field input, [data-theme="light"] .cmp-track, [data-theme="light"] input { background: #F7F9FC; } [data-theme="light"] .tab-on { background:#FFFFFF; box-shadow:0 1px 2px rgba(16,24,40,.08) } /* The app bar and nav are translucent over the page colour. */ [data-theme="light"] .appbar, [data-theme="light"] .nav { background: rgba(244, 246, 251, .88); } /* Gradient hero washes were built for a dark backdrop. */ [data-theme="light"] .pitch { background: radial-gradient(120% 90% at 0% 0%, rgba(109,40,217,.10), transparent 60%), radial-gradient(120% 90% at 100% 100%, rgba(21,128,61,.08), transparent 55%), #FFFFFF; } [data-theme="light"] .final { background: radial-gradient(70% 130% at 50% 0%, rgba(109,40,217,.10), transparent 65%); } [data-theme="light"] .banner { background: linear-gradient(100deg, rgba(109,40,217,.10), rgba(3,105,161,.06)); border-color: rgba(109,40,217,.25); } [data-theme="light"] .ha-card { box-shadow: 0 20px 50px -28px rgba(109,40,217,.35) } /* Status chips: the 14%-alpha fills disappear on white. */ [data-theme="light"] .chip-red, [data-theme="light"] .prio-red, [data-theme="light"] .pill-bad { background: rgba(185,28,28,.10) } [data-theme="light"] .chip-amber, [data-theme="light"] .prio-amber, [data-theme="light"] .pill-mid { background: rgba(180,83,9,.10) } [data-theme="light"] .chip-muted { background: rgba(90,102,120,.12) } [data-theme="light"] .prio-green, [data-theme="light"] .pill-good { background: rgba(21,128,61,.10) } [data-theme="light"] .hs-done { background: rgba(21,128,61,.10) } [data-theme="light"] .hs-failed { background: rgba(185,28,28,.10) } [data-theme="light"] .hs-queued, [data-theme="light"] .hs-fetching, [data-theme="light"] .hs-processing, [data-theme="light"] .hs-analyzing { background: rgba(180,83,9,.10) } [data-theme="light"] .w-ico { background: rgba(21,128,61,.10) } [data-theme="light"] .hc-ico { background: rgba(185,28,28,.10) } [data-theme="light"] .needc { background: rgba(180,83,9,.10); color:#92400E } [data-theme="light"] .banner-err { background: rgba(185,28,28,.08); color:#991B1B } [data-theme="light"] .banner-ok { background: rgba(21,128,61,.08); color:#166534 } [data-theme="light"] .banner-info{ background: rgba(3,105,161,.08); color:#075985 } [data-theme="light"] .refbadge { background: rgba(21,128,61,.08); color:#166534 } [data-theme="light"] .pill { background: rgba(21,128,61,.10); color:#166534 } [data-theme="light"] .honest { background: rgba(3,105,161,.06) } [data-theme="light"] .referral { background: rgba(21,128,61,.07) } /* Filled status badge keeps a dark glyph, which needs a light one here. */ [data-theme="light"] .cbadge svg { stroke: #FFFFFF } /* Buttons that were "transparent on dark" need a real surface on light. */ [data-theme="light"] button.ghost, [data-theme="light"] .btn-ghost, [data-theme="light"] .obtn { background:#FFFFFF } /* The theme button itself. */ .themeBtn{background:none;border:1px solid var(--line);color:var(--muted); width:32px;height:32px;border-radius:8px;cursor:pointer;display:inline-flex; align-items:center;justify-content:center;flex:0 0 32px;padding:0} .themeBtn:hover{color:var(--text);border-color:var(--line-strong)}