/* ============================================================================ theme.light.css — Sociologix day mode (cream) ---------------------------------------------------------------------------- Drop-in override. Loads AFTER style.css. Activates when has data-theme="light". Touches ONLY color / border / shadow tokens. Type, spacing, radii, motion, and brand subfield/num accents stay identical to the dark theme. Includes targeted overrides for two style.css selectors that hard-code charcoal (#14141a) instead of using the bg tokens: - .doc-window-body (publication / doc viewer panel) - .doc-window-body iframe (PDF viewer wrapper background) ============================================================================ */ [data-theme="light"] { /* ── Cream foundation (deeper / more elevation contrast) ───────────── Each layer pulled toward warmer cream tones so the page reads as "warm cream paper" instead of "off-white". bg-base shifts from near-white #fbfaf4 to a more substantial #f4ecd1; cards lift visibly above it; bg-deepest is meaningfully darker for header/ footer floors. */ --bg-deepest: #d8cdb1; /* inset / header-footer floor (was #ebe3d0) */ --bg-base: #f4ecd1; /* main canvas — warm cream (was #fbfaf4) */ --bg-elev-1: #fbf3d8; /* cards / elevated surfaces (was #fbf6e8) */ --bg-elev-2: #fefae8; /* highest — popovers, modals (was #ffffff) */ --bg-elev-3: #e6dbb9; /* warm wash — subfield section, callouts (was #efe7d2) */ /* ── Borders (warm-brown alpha; bumped for visibility on cream) ─────── */ --border: rgba(40, 28, 12, 0.12); --border-strong: rgba(40, 28, 12, 0.22); --border-accent: rgba(45, 166, 179, 0.36); /* ── Text (warm near-black ladder) ───────────────────────────────────── */ --text: #281c0c; --text-muted: #6b5d4a; --text-faint: #a89c84; /* ── Accent — turquoise. --accent maps to the deep variant for contrast on cream; --accent-deep goes deeper still. ──────────────── */ --accent: #2da6b3; --accent-hover: #1f8a96; --accent-soft: rgba(45, 166, 179, 0.10); --accent-glow: rgba(45, 166, 179, 0.22); --accent-deep: #166670; /* ── Warm signal (deeper amber for cream) ────────────────────────────── */ --warm: #b8742a; --warm-soft: rgba(184, 116, 42, 0.12); /* ── Subfield brand palette (peach/coral/red/magenta/purple) is fixed brand. Keep hues; dial down soft/glow alphas for cream. ───── */ --subfield-soft: rgba(235, 87, 80, 0.08); --subfield-glow: rgba(235, 87, 80, 0.18); --num-soft: rgba(214, 90, 90, 0.08); --num-glow: rgba(214, 90, 90, 0.18); /* ── Shadows: deeper, warmer; more layered separation ────────────────── */ --shadow-card: 0 1px 2px rgba(40, 28, 12, 0.06), 0 2px 6px rgba(40, 28, 12, 0.05), 0 14px 36px rgba(40, 28, 12, 0.10); --shadow-lift: 0 4px 8px rgba(40, 28, 12, 0.08), 0 12px 24px rgba(40, 28, 12, 0.10), 0 28px 70px rgba(40, 28, 12, 0.14); --shadow-glow: 0 0 0 1px var(--border-accent), 0 24px 60px rgba(40, 28, 12, 0.14), 0 0 40px var(--accent-glow); } /* ============================================================================ TARGETED OVERRIDES — selectors in style.css that hard-code charcoal hex instead of using --bg-* tokens. Higher specificity (html[data-theme]) beats the original rule cleanly without !important. ============================================================================ */ /* Publication / CV / resume doc-window: the panel that pops in front of the site with terminal-style chrome and a body that loads PDFs/HTML. style.css sets background:#14141a directly on .doc-window-body and the iframe. */ html[data-theme="light"] .doc-window-body { background: var(--bg-elev-1); } html[data-theme="light"] .doc-window-body iframe { background: var(--bg-elev-1); } /* NUM section status badges (live / testing / dev): style.css applies a strong gradient ::after overlay to .card-shot which paints over the z:3 badge in some stacking contexts. Lift the badge above it. */ html[data-theme="light"] .card-status-badge { z-index: 5; } /* Apply in dark mode too — same fix is universally correct. */ .card-status-badge { z-index: 5; } /* PDFs render with the browser's own UI inside the iframe — those keep their default chrome (light viewer). The wrapping panel is now cream, so the dark frame around the PDF disappears. */ /* ============================================================================ SECTION DOTS — the right-rail nav dots default to background:var(--text), which paints them solid charcoal on cream. Lighten the inactive state to warm hollow circles so the rail recedes; active/hover stay coloured. ============================================================================ */ html[data-theme="light"] .section-dots span { background: var(--bg-elev-2); /* near-white interior */ border-color: var(--border-strong); /* soft warm-brown ring */ } html[data-theme="light"] .section-dots a:hover span { background: color-mix(in oklab, var(--warm) 14%, var(--bg-elev-2)); } /* Active rule already sets background:var(--dot-color) — nothing to do. */ /* Label chip on cream — the default uses bg-deepest at 80% which goes muddy. Use elev-2 for crisp contrast against the page. */ html[data-theme="light"] .section-dots em { background: color-mix(in oklab, var(--bg-elev-2) 88%, transparent); border-color: var(--border); color: var(--text-muted); } /* ============================================================================ IMAGES — network-viz renders are baked on dark. Ship as-is by default; opt-in dim is available via class="theme-dim-on-light". ============================================================================ */ html[data-theme="light"] .theme-dim-on-light { filter: brightness(0.95) contrast(0.98); } /* ============================================================================ OPTIONAL — auto-honor OS preference. Uncomment if you want light mode to apply automatically when the user's OS is set to light, with no manual toggle. Keep commented for explicit user control. ============================================================================ */ /* @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --bg-deepest: #ebe3d0; --bg-base: #f6f0e0; --bg-elev-1: #fbf6e8; --bg-elev-2: #ffffff; --bg-elev-3: #efe7d2; --border: rgba(40, 28, 12, 0.12); --border-strong: rgba(40, 28, 12, 0.22); --border-accent: rgba(45, 166, 179, 0.36); --text: #281c0c; --text-muted: #6b5d4a; --text-faint: #a89c84; --accent: #2da6b3; --accent-hover: #1f8a96; --accent-soft: rgba(45, 166, 179, 0.10); --accent-glow: rgba(45, 166, 179, 0.22); --accent-deep: #166670; --warm: #b8742a; --warm-soft: rgba(184, 116, 42, 0.12); --subfield-soft: rgba(235, 87, 80, 0.08); --subfield-glow: rgba(235, 87, 80, 0.18); --num-soft: rgba(214, 90, 90, 0.08); --num-glow: rgba(214, 90, 90, 0.18); --shadow-card: 0 1px 2px rgba(40,28,12,0.06), 0 2px 6px rgba(40,28,12,0.05), 0 14px 36px rgba(40,28,12,0.10); --shadow-lift: 0 4px 8px rgba(40,28,12,0.08), 0 12px 24px rgba(40,28,12,0.10), 0 28px 70px rgba(40,28,12,0.14); --shadow-glow: 0 0 0 1px var(--border-accent), 0 24px 60px rgba(40,28,12,0.14), 0 0 40px var(--accent-glow); } :root:not([data-theme="dark"]) .doc-window-body, :root:not([data-theme="dark"]) .doc-window-body iframe { background: var(--bg-elev-1); } } */