/* Light theme overrides — activated by
Surfaces are warm-tinted off-whites to sit with the orange brand;
cards are true white and lift off the page with a soft shadow. */
html.light ::-webkit-scrollbar-track { background: #f1f0ee; }
html.light ::-webkit-scrollbar-thumb { background: #d6d3d1; }
html.light ::-webkit-scrollbar-thumb:hover { background: #ea580c; }
html.light ::selection { background: rgba(249,115,22,.2); color: #1c1917; }
html.light .glow-orange { box-shadow: 0 18px 50px -20px rgba(120,53,15,.28); }
html.light .glow-hover:hover { box-shadow: 0 0 28px -6px rgba(249,115,22,.45); }
/* ---- Page surface ---- */
html.light body,
html.light .bg-darkBg { background-color: #faf9f7; }
html.light .bg-darkBg\/80 { background-color: rgba(250,249,247,.85); }
html.light .bg-darkBg\/95 { background-color: rgba(250,249,247,.97); }
html.light .from-darkBg {
--tw-gradient-from: #faf9f7 var(--tw-gradient-from-position);
--tw-gradient-to: rgb(250 249 247 / 0) var(--tw-gradient-to-position);
--tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
html.light .to-slate-950 { --tw-gradient-to: #f0eeea var(--tw-gradient-to-position); }
/* ---- Cards: white, softly raised ---- */
html.light .bg-darkCard,
html.light .bg-darkCard\/90,
html.light .bg-darkCard\/80,
html.light .bg-darkCard\/60,
html.light .bg-darkCard\/50,
html.light .bg-darkCard\/40,
html.light .bg-darkCard\/30 {
background-color: #ffffff;
box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 8px 24px -12px rgba(28,25,23,.10);
}
/* ---- Recessed / secondary panels ---- */
html.light .bg-slate-950,
html.light .bg-slate-950\/60,
html.light .bg-slate-950\/40 { background-color: #f0eeea; }
html.light .bg-slate-900,
html.light .bg-slate-900\/80,
html.light .bg-slate-900\/50,
html.light .bg-slate-900\/40,
html.light .bg-slate-900\/30,
html.light .bg-slate-900\/20 { background-color: #f5f4f1; }
html.light .bg-slate-800,
html.light .bg-slate-800\/50 { background-color: #eceae6; }
/* Inverted button (was white-on-dark, now dark-on-light) */
html.light .bg-white { background-color: #1c1917; }
html.light .hover\:bg-slate-100:hover { background-color: #292524; }
html.light .text-darkBg { color: #faf9f7; }
/* ---- Borders ---- */
html.light .border-slate-900,
html.light .border-slate-850,
html.light .border-slate-800,
html.light .border-slate-800\/80,
html.light .border-slate-800\/60 { border-color: #e7e5e1; }
html.light .border-slate-700 { border-color: #d6d3d1; }
/* ---- Type ramp: near-black headings, warm-grey body ---- */
html.light .text-white { color: #1c1917; }
html.light .text-slate-200 { color: #292524; }
html.light .text-slate-300 { color: #44403c; }
html.light .text-slate-400 { color: #57534e; }
html.light .text-slate-500 { color: #6b625c; }
html.light .text-slate-600 { color: #a8a29e; }
/* Oversized step numerals — a watermark, not content */
html.light .text-slate-800 { color: #dcd9d4; }
/* ---- Brand accents: the 300/400/500 ramp is tuned for dark grounds
and goes pale on white. Shift accent *text* down the ramp so it
holds contrast; fills and borders keep their original values. ---- */
html.light .text-brand-300 { color: #c2410c; }
html.light .text-brand-400 { color: #c2410c; }
html.light .text-brand-500 { color: #c2410c; }
html.light .hover\:text-brand-400:hover { color: #c2410c; }
html.light .group:hover .group-hover\:text-brand-400 { color: #c2410c; }
/* ---- Keep white type only on genuinely solid dark/brand fills ----
Exact class tokens: bg-brand-500/10 and friends are faint tints and
must NOT match, or their text washes out. */
html.light .bg-brand-500 .text-white,
html.light .bg-brand-600 .text-white,
html.light a.bg-brand-500, html.light a.bg-brand-500 span,
html.light a.bg-brand-600, html.light a.bg-brand-600 span,
html.light button.bg-brand-500, html.light button.bg-brand-600,
html.light .bg-brand-500.text-white,
html.light .bg-brand-600.text-white,
html.light .bg-white .text-white { color: #ffffff; }
/* Solid brand fills darken on light ground: white-on-brand-500 is only
2.8:1, and the deeper orange reads richer against an off-white page. */
html.light .bg-brand-500:not(.terminal-card) { background-color: #c2410c; }
html.light .bg-brand-600 { background-color: #9a3412; }
html.light .hover\:bg-brand-600:hover { background-color: #9a3412; }
html.light .hover\:bg-brand-500:hover { background-color: #c2410c; }
/* ---- The hero terminal stays dark in light mode ----
It's a faux console; a white terminal reads wrong, and its syntax
palette (blue/emerald on dark) has no legible light equivalent.
Re-assert the dark values inside it, overriding the ramp above. */
html.light .terminal-card,
html.light .terminal-card.bg-darkCard\/80 {
background-color: #151d30;
border-color: #1e293b;
box-shadow: 0 24px 60px -24px rgba(28,25,23,.45);
}
html.light .terminal-card .border-slate-800 { border-color: #1e293b; }
html.light .terminal-card .bg-slate-800 { background-color: #1e293b; }
html.light .terminal-card .text-white { color: #ffffff; }
html.light .terminal-card .text-slate-300 { color: #cbd5e1; }
html.light .terminal-card .text-slate-400 { color: #94a3b8; }
html.light .terminal-card .text-slate-500 { color: #64748b; }
html.light .terminal-card .text-brand-500 { color: #f97316; }
html.light .terminal-card .text-brand-400 { color: #fb923c; }
html.light .terminal-card .text-brand-300 { color: #fdba74; }
html.light .terminal-card .text-blue-400 { color: #60a5fa; }
html.light .terminal-card .text-emerald-400 { color: #34d399; }
/* ---- Status colors: the 400-weight greens/blues vanish on white.
Deepened to their 700 equivalents everywhere except the terminal. ---- */
html.light .text-emerald-400 { color: #047857; }
html.light .text-emerald-500 { color: #047857; }
html.light .text-blue-400 { color: #1d4ed8; }
html.light .text-green-400 { color: #15803d; }
html.light .text-yellow-400 { color: #a16207; }
html.light .text-red-400 { color: #b91c1c; }
/* ---- Hover states that assumed a dark base ---- */
html.light .hover\:text-white:hover { color: #1c1917; }
html.light .hover\:bg-slate-800\/50:hover { background-color: #eceae6; }
html.light .hover\:bg-slate-800:hover { background-color: #eceae6; }