/* ============================================================ Stochastix — LIGHT theme Layered on top of site.css. Apply with the .theme-light class on (set early to avoid flash) or . Overrides design tokens + the handful of surfaces that hardcode light-on-dark values. Canvas colours are read from these vars by home.js. ============================================================ */ .theme-light{ --bg:#f7fafc; --bg-2:#eef3f8; --panel:#ffffff; --panel-2:#f1f5f9; --line:rgba(15,42,80,.12); --text:#0f1b2d; --muted:#56657a; --teal:#0d9488; --cyan:#0891b2; --blue:#0d9488; --violet:#0891b2; --grad:linear-gradient(120deg,#0d9488 0%,#0ea5a3 50%,#0891b2 100%); --grad-soft:linear-gradient(120deg,rgba(13,148,136,.12),rgba(8,145,178,.10)); --shadow:0 22px 50px -24px rgba(15,42,80,.30); /* canvas palette */ --c-band:rgba(13,148,136,0.07); --c-traj:rgba(13,148,136,0.16); --c-traj-hi:rgba(8,145,178,0.6); --c-apex:rgba(13,148,136,0.95); --c-grid:rgba(15,42,80,.10); --c-spark-dim:rgba(15,42,80,.16); --c-curve:#0891b2; --c-bar0:rgba(13,148,136,.85); --c-bar1:rgba(8,145,178,.10); --c-axis:rgba(15,42,80,.22); --c-g0:#0d9488; --c-g1:#0ea5a3; --c-g2:#0891b2; } /* primary button: deep-teal gradient reads best with white text on light */ .theme-light .btn-primary{color:#ffffff;box-shadow:0 8px 24px -10px rgba(13,148,136,.55)} .theme-light .btn-primary:hover{box-shadow:0 14px 32px -10px rgba(13,148,136,.7)} /* frosted header on scroll */ .theme-light header.scrolled{background:rgba(247,250,252,.82);border-bottom:1px solid var(--line)} .theme-light .nav-links{background:rgba(247,250,252,.97)} /* mobile dropdown */ /* logo tile: keep a crisp dark mark so the bell curve stays legible on white */ .theme-light .brand svg{filter:none} /* surfaces that hardcoded white-on-dark tints in site.css */ .theme-light .trust{background:rgba(15,42,80,.02)} .theme-light .trust .items a{color:#475569} .theme-light .step, .theme-light .challenge{background:rgba(15,42,80,.025)} .theme-light .mini-stats div{background:rgba(15,42,80,.04)} .theme-light .case .metric{background:rgba(15,42,80,.03)} .theme-light .pill{background:rgba(15,42,80,.03);color:#475569} .theme-light .about-grid li{color:#3f4d61} .theme-light .foot-col a, .theme-light .foot-brand p{color:#475569} .theme-light .live{color:#0891b2} /* card top-accent + hover borders use teal already via --grad/vars, no change needed */