/* ============================================================================= light-mode.css — Synapse-S (LAYER 3 of the design system) ───────────────────────────────────────────────────────────────────────────── DESIGN SYSTEM LAYERS: Layer 1 — design-tokens.css §1-11 : CSS custom property tokens + semantic component classes (.page-card, .field-input, .data-table …) These are the correct production way to build UI — they auto-adapt to both dark and light themes via Layer 2. Layer 2 — design-tokens.css §12 : Light-mode token overrides. Redefines --surface-*, --text-*, --border-* for the light palette. ANY element using semantic component classes needs no override here. Layer 3 — THIS FILE : Light-mode structural + catch-all. Catches the few truly unavoidable raw-Tailwind utilities that live in base.html (navbar, brand, auth buttons) and any one-off elements that are not worth wrapping in a component class. HOW TO WORK WITH THE DESIGN SYSTEM: ───────────────────────────────────────────────────────────────────────────── • NEW COMPONENT → add a semantic class to design-tokens.css §11. Use token variables only (--surface-card, --border-standard…) Theme switching is automatic. • GLOBAL TOKEN CHANGE → edit the value in design-tokens.css §5-7 for dark, and in §12 for the light override. One edit = everywhere. • STRUCTURAL OVERRIDE → add to this file (Layer 3). Keep it minimal. • NEVER hard-code rgba / hex colours in templates. Sections: A. Toggle icon visibility (always active, both modes) B. Global zinc/black utility fallback (stragglers after template refactor) C. Global white-alpha border fallback D. Global text-white/zinc fallback E. Global dividers / rings fallback F. Structural: body, brand, nav-links, auth buttons G. Modal overlays (mobile menu) H. Form input catch-all safety net I. Breadcrumb bar, footer, horizontal dividers J. Design-token component overrides (btn-primary in light) K. Scrollbar ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── A. TOGGLE ICON VISIBILITY (always loaded, both modes) ───────────────────────────────────────────────────────────────────────────── */ .cs-toggle .cs-sun { display: none; } .cs-toggle .cs-moon { display: block; } html[data-color-scheme="light"] .cs-toggle .cs-sun { display: block; } html[data-color-scheme="light"] .cs-toggle .cs-moon { display: none; } /* Color-scheme picker buttons */ .cs-scheme-btn { opacity: 0.55; } .cs-scheme-btn[data-active="true"] { opacity: 1; background: rgba(0,0,0,0.06); color: rgb(var(--text-strong)); } /* ───────────────────────────────────────────────────────────────────────────── B. GLOBAL TAILWIND SURFACE BACKGROUNDS (dark → light equivalents) Covers solid zinc-* and black utility classes used across every template. ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .bg-black { background-color: rgb(255 255 255) !important; } html[data-color-scheme="light"] .bg-zinc-950 { background-color: rgb(247 247 249) !important; } html[data-color-scheme="light"] .bg-zinc-900 { background-color: rgb(244 244 246) !important; } html[data-color-scheme="light"] .bg-zinc-800 { background-color: rgb(236 236 240) !important; } html[data-color-scheme="light"] .bg-zinc-700 { background-color: rgb(220 220 226) !important; } /* Tailwind bg-background / bg-card are configured to #09090b — override to light surfaces */ html[data-color-scheme="light"] .bg-background { background-color: rgb(var(--surface-page)) !important; } html[data-color-scheme="light"] .bg-card { background-color: rgb(var(--surface-card)) !important; } /* Surface utility classes (from design-tokens.css §11) — light overrides */ html[data-color-scheme="light"] .bg-page-surface { background-color: rgb(248 248 250) !important; } html[data-color-scheme="light"] .bg-card-surface { background-color: rgb(255 255 255) !important; } html[data-color-scheme="light"] .border-surface { border-color: rgba(0,0,0,0.08) !important; } /* Toggle track in light mode */ html[data-color-scheme="light"] .toggle-track { background-color: rgb(220 220 226) !important; } html[data-color-scheme="light"] .toggle-track::after { background-color: rgb(255 255 255) !important; } /* ───────────────────────────────────────────────────────────────────────────── C. GLOBAL TAILWIND ALPHA BACKGROUNDS (dark semi-transparent → light) These classes appear on inputs, cards, modals, section containers. ───────────────────────────────────────────────────────────────────────────── */ /* black/alpha — used heavily for input fields, card overlays */ html[data-color-scheme="light"] .bg-black\/5 { background-color: rgba(0,0,0,0.03) !important; } html[data-color-scheme="light"] .bg-black\/10 { background-color: rgba(0,0,0,0.04) !important; } html[data-color-scheme="light"] .bg-black\/20 { background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .bg-black\/25 { background-color: rgba(0,0,0,0.06) !important; } html[data-color-scheme="light"] .bg-black\/30 { background-color: rgb(250 250 252) !important; } html[data-color-scheme="light"] .bg-black\/40 { background-color: rgb(248 248 250) !important; } html[data-color-scheme="light"] .bg-black\/50 { background-color: rgb(246 246 248) !important; } html[data-color-scheme="light"] .bg-black\/60 { background-color: rgba(0,0,0,0.35) !important; } /* modal backdrop: keep partially dark */ html[data-color-scheme="light"] .bg-black\/70 { background-color: rgba(0,0,0,0.40) !important; } html[data-color-scheme="light"] .bg-black\/80 { background-color: rgba(0,0,0,0.45) !important; } /* zinc-900/alpha — used for tab nav, card containers */ html[data-color-scheme="light"] .bg-zinc-900\/20 { background-color: rgb(248 248 250) !important; } html[data-color-scheme="light"] .bg-zinc-900\/30 { background-color: rgb(247 247 249) !important; } html[data-color-scheme="light"] .bg-zinc-900\/40 { background-color: rgb(246 246 248) !important; } html[data-color-scheme="light"] .bg-zinc-900\/50 { background-color: rgb(245 245 247) !important; } html[data-color-scheme="light"] .bg-zinc-900\/60 { background-color: rgb(244 244 246) !important; } html[data-color-scheme="light"] .bg-zinc-900\/70 { background-color: rgb(242 242 244) !important; } html[data-color-scheme="light"] .bg-zinc-900\/80 { background-color: rgb(240 240 242) !important; } /* zinc-800/alpha — used for active nav states, hover states */ html[data-color-scheme="light"] .bg-zinc-800\/20 { background-color: rgba(0,0,0,0.04) !important; } html[data-color-scheme="light"] .bg-zinc-800\/30 { background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .bg-zinc-800\/40 { background-color: rgba(0,0,0,0.06) !important; } html[data-color-scheme="light"] .bg-zinc-800\/50 { background-color: rgba(0,0,0,0.07) !important; } /* bg-card/alpha — bg-card is #09090b (dark), with alpha → near-white in light */ html[data-color-scheme="light"] .bg-card\/10 { background-color: rgb(252 252 254) !important; } html[data-color-scheme="light"] .bg-card\/20 { background-color: rgb(250 250 252) !important; } html[data-color-scheme="light"] .bg-card\/30 { background-color: rgb(248 248 250) !important; } html[data-color-scheme="light"] .bg-card\/40 { background-color: rgb(246 246 248) !important; } html[data-color-scheme="light"] .bg-card\/50 { background-color: rgb(244 244 246) !important; } /* bg-background/alpha */ html[data-color-scheme="light"] .bg-background\/80 { background-color: rgb(var(--surface-page) / 0.87) !important; } /* white/alpha — these are "subtle tint" classes, flip to near-transparent dark */ html[data-color-scheme="light"] .bg-white\/\[0\.01\] { background-color: rgba(0,0,0,0.01) !important; } html[data-color-scheme="light"] .bg-white\/\[0\.02\] { background-color: rgba(0,0,0,0.02) !important; } html[data-color-scheme="light"] .bg-white\/\[0\.03\] { background-color: rgba(0,0,0,0.02) !important; } html[data-color-scheme="light"] .bg-white\/\[0\.04\] { background-color: rgba(0,0,0,0.03) !important; } html[data-color-scheme="light"] .bg-white\/\[0\.06\] { background-color: rgba(0,0,0,0.03) !important; } html[data-color-scheme="light"] .bg-white\/\[0\.08\] { background-color: rgba(0,0,0,0.04) !important; } html[data-color-scheme="light"] .bg-white\/5 { background-color: rgba(0,0,0,0.03) !important; } html[data-color-scheme="light"] .bg-white\/8 { background-color: rgba(0,0,0,0.04) !important; } html[data-color-scheme="light"] .bg-white\/10 { background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .bg-white\/15 { background-color: rgba(0,0,0,0.07) !important; } html[data-color-scheme="light"] .bg-white\/20 { background-color: rgba(0,0,0,0.09) !important; } html[data-color-scheme="light"] .bg-white\/25 { background-color: rgba(0,0,0,0.11) !important; } /* ───────────────────────────────────────────────────────────────────────────── D. GLOBAL TAILWIND ALPHA BORDERS (white-on-dark → black-on-light) ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .border-white\/5 { border-color: rgba(0,0,0,0.06) !important; } html[data-color-scheme="light"] .border-white\/8 { border-color: rgba(0,0,0,0.08) !important; } html[data-color-scheme="light"] .border-white\/10 { border-color: rgba(0,0,0,0.10) !important; } html[data-color-scheme="light"] .border-white\/15 { border-color: rgba(0,0,0,0.12) !important; } html[data-color-scheme="light"] .border-white\/20 { border-color: rgba(0,0,0,0.14) !important; } html[data-color-scheme="light"] .border-white\/25 { border-color: rgba(0,0,0,0.17) !important; } html[data-color-scheme="light"] .border-white\/30 { border-color: rgba(0,0,0,0.20) !important; } /* zinc borders */ html[data-color-scheme="light"] .border-zinc-800 { border-color: rgba(0,0,0,0.10) !important; } html[data-color-scheme="light"] .border-zinc-700 { border-color: rgba(0,0,0,0.14) !important; } /* ───────────────────────────────────────────────────────────────────────────── E. GLOBAL TAILWIND TEXT COLOURS (light text → dark text) Only override the lightest shades (300 and above). 400+ are muted and generally fine on both backgrounds. ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .text-white { color: rgb(9 9 11) !important; } html[data-color-scheme="light"] .text-white\/90 { color: rgb(24 24 27) !important; } html[data-color-scheme="light"] .text-white\/80 { color: rgb(39 39 42) !important; } html[data-color-scheme="light"] .text-zinc-100 { color: rgb(9 9 11) !important; } html[data-color-scheme="light"] .text-zinc-200 { color: rgb(39 39 42) !important; } html[data-color-scheme="light"] .text-zinc-300 { color: rgb(63 63 70) !important; } /* RE-RESTORE white text when sitting on filled-color buttons (the global .text-white→dark override above otherwise makes labels invisible on primary/destructive/success/info backgrounds). */ html[data-color-scheme="light"] .bg-primary.text-white, html[data-color-scheme="light"] .bg-primary .text-white, html[data-color-scheme="light"] [class*="bg-primary"].text-white, html[data-color-scheme="light"] .btn-brand, html[data-color-scheme="light"] .btn-brand .text-white, html[data-color-scheme="light"] button[type="submit"].bg-primary, html[data-color-scheme="light"] a.bg-primary.text-white, html[data-color-scheme="light"] .bg-red-500.text-white, html[data-color-scheme="light"] .bg-red-600.text-white, html[data-color-scheme="light"] .bg-emerald-500.text-white, html[data-color-scheme="light"] .bg-emerald-600.text-white { color: #ffffff !important; } /* .btn-brand uses color: var(--text-strong) which is near-black in light mode → becomes invisible on the indigo/violet/etc fill. Force white text in light mode. */ html[data-color-scheme="light"] .btn-brand, html[data-color-scheme="light"] .btn-brand * { color: #ffffff !important; } html[data-color-scheme="light"] .btn-brand svg { color: #ffffff !important; stroke: #ffffff; } /* Color-scheme picker buttons (Light / System / Dark) in the user dropdown. Inactive ones were sitting at opacity:0.55 making labels almost invisible on the white card. Boost contrast in light mode only. */ html[data-color-scheme="light"] .cs-scheme-btn { opacity: 1 !important; color: rgb(var(--text-muted)) !important; } html[data-color-scheme="light"] .cs-scheme-btn:hover { color: rgb(var(--text-strong)) !important; background: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .cs-scheme-btn.is-active, html[data-color-scheme="light"] .cs-scheme-btn[data-active="true"] { color: rgb(var(--text-strong)) !important; background: rgb(var(--t-p) / 0.10) !important; border-color: rgb(var(--t-p) / 0.35) !important; } /* Belt-and-braces: ANY element that has a colored background utility AND text-white should keep its white label in light mode. Selector specificity is forced above the global `.text-white → dark` rule. */ html[data-color-scheme="light"] [class~="text-white"][class*="bg-primary"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-red-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-rose-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-emerald-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-green-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-blue-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-violet-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-indigo-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-amber-"], html[data-color-scheme="light"] [class~="text-white"][class*="bg-cyan-"] { color: #ffffff !important; } /* Many CTA buttons across the app use the pattern `bg-primary text-ink-strong` intentionally — `text-ink-strong` is white in dark mode but flips to near-black in light mode, which becomes invisible on the brand-color fill. Force white text + icon color on solid (or near-opaque) primary backgrounds in light mode. We exclude low-alpha variants (bg-primary/5/10/15/20/25/30/40) which are meant as tints with DARK text. */ html[data-color-scheme="light"] .bg-primary, html[data-color-scheme="light"] .hover\:bg-primary:hover, html[data-color-scheme="light"] .bg-primary\/50, html[data-color-scheme="light"] .bg-primary\/60, html[data-color-scheme="light"] .bg-primary\/70, html[data-color-scheme="light"] .bg-primary\/80, html[data-color-scheme="light"] .bg-primary\/90, html[data-color-scheme="light"] .hover\:bg-primary\/90:hover { color: #ffffff !important; } html[data-color-scheme="light"] .bg-primary svg, html[data-color-scheme="light"] .bg-primary\/80 svg, html[data-color-scheme="light"] .bg-primary\/90 svg { color: #ffffff !important; } /* Alert / banner text on tinted-light backgrounds. Templates use `text-amber-300` / `text-red-300` for messages — too pale on light. */ html[data-color-scheme="light"] .text-amber-200, html[data-color-scheme="light"] .text-amber-300, html[data-color-scheme="light"] .text-amber-300\/80, html[data-color-scheme="light"] .text-amber-300\/90, html[data-color-scheme="light"] .text-amber-300\/95, html[data-color-scheme="light"] .text-amber-400, html[data-color-scheme="light"] .text-amber-400\/80, html[data-color-scheme="light"] .text-amber-400\/90, html[data-color-scheme="light"] .text-amber-400\/95 { color: rgb(146 64 14) !important; } /* amber-800 */ html[data-color-scheme="light"] .text-red-200, html[data-color-scheme="light"] .text-red-300, html[data-color-scheme="light"] .text-red-400 { color: rgb(153 27 27) !important; } /* red-800 */ html[data-color-scheme="light"] .text-emerald-200, html[data-color-scheme="light"] .text-emerald-300, html[data-color-scheme="light"] .text-emerald-300\/80, html[data-color-scheme="light"] .text-emerald-300\/90, html[data-color-scheme="light"] .text-emerald-400 { color: rgb(6 95 70) !important; } /* emerald-800 */ html[data-color-scheme="light"] .text-cyan-200, html[data-color-scheme="light"] .text-cyan-300, html[data-color-scheme="light"] .text-cyan-400 { color: rgb(14 116 144) !important; } /* cyan-700 */ html[data-color-scheme="light"] .text-violet-200, html[data-color-scheme="light"] .text-violet-300, html[data-color-scheme="light"] .text-violet-400 { color: rgb(91 33 182) !important; } /* violet-800 */ /* placeholder text */ html[data-color-scheme="light"] .placeholder\:text-zinc-600::placeholder { color: rgb(161 161 170) !important; } html[data-color-scheme="light"] .placeholder\:text-zinc-700::placeholder { color: rgb(161 161 170) !important; } /* ───────────────────────────────────────────────────────────────────────────── F. GLOBAL DIVIDERS AND RINGS ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .divide-white\/5 > * + * { border-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .ring-white\/10 { --tw-ring-color: rgba(0,0,0,0.08) !important; } /* ───────────────────────────────────────────────────────────────────────────── G. STRUCTURAL ELEMENTS ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] body { background-color: rgb(var(--surface-page)); color: rgb(var(--text-default)); } /* Glass navbar — token-based since previous session, no override needed here */ /* Brand name gradient — "from-white to-zinc-400" → dark gradient */ html[data-color-scheme="light"] .brand-name { background-image: linear-gradient( to right, #09090b, #18181b ) !important; } /* Desktop nav links - darker colors for visibility */ html[data-color-scheme="light"] header nav a { color: #18181b !important; } html[data-color-scheme="light"] header nav a:hover { color: #09090b !important; background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] header nav a.nav-link-active { background-color: rgba(0,0,0,0.07) !important; color: #09090b !important; --tw-ring-color: rgba(0,0,0,0.08) !important; } /* Theme swatch ring-offset */ html[data-color-scheme="light"] [data-theme-btn] { --tw-ring-offset-color: rgb(var(--surface-active)) !important; } /* Color scheme toggle */ html[data-color-scheme="light"] .cs-toggle { color: rgb(var(--text-faint)); } html[data-color-scheme="light"] .cs-toggle:hover { color: rgb(var(--text-strong)); background-color: rgba(0,0,0,0.05); } /* Unauthenticated buttons */ html[data-color-scheme="light"] .auth-signin-link { color: rgb(var(--text-muted)) !important; } html[data-color-scheme="light"] .auth-signin-link:hover { color: rgb(var(--text-strong)) !important; } html[data-color-scheme="light"] .cta-get-started { background-color: rgb(var(--text-strong)) !important; color: rgb(var(--surface-page)) !important; box-shadow: none !important; } html[data-color-scheme="light"] .cta-get-started:hover { background-color: rgb(var(--text-default)) !important; } /* ───────────────────────────────────────────────────────────────────────────── H. MODAL OVERLAYS ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] #mobile-menu { background-color: rgb(var(--surface-page) / 0.97) !important; } html[data-color-scheme="light"] #mobile-menu nav a { color: rgb(var(--text-default)) !important; } html[data-color-scheme="light"] #mobile-menu nav a:hover { color: rgb(var(--text-strong)) !important; background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .mobile-separator { background-color: rgba(0,0,0,0.07) !important; } /* ───────────────────────────────────────────────────────────────────────────── I. FORM INPUTS / SELECTS / TEXTAREAS The most critical section — dark inputs on light backgrounds look terrible. Targets any interactive element that uses the dark input pattern. ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]), html[data-color-scheme="light"] textarea, html[data-color-scheme="light"] select { background-color: rgb(var(--surface-card)) !important; color: rgb(var(--text-default)) !important; border-color: rgba(0,0,0,0.12) !important; } html[data-color-scheme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"])::placeholder, html[data-color-scheme="light"] textarea::placeholder { color: rgb(var(--text-faint)) !important; } html[data-color-scheme="light"] input:focus, html[data-color-scheme="light"] textarea:focus, html[data-color-scheme="light"] select:focus { background-color: rgb(255 255 255) !important; border-color: rgba(var(--t-p), 0.4) !important; } /* ───────────────────────────────────────────────────────────────────────────── J. AGENT DETAIL TAB NAVIGATION BAR The pill-shaped tab nav uses bg-zinc-900/50 container + zinc-500 text. Active tab is set via inline style by JS (already token-based: rgb(t-p/0.15)). ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] #tab-nav { background-color: rgb(240 240 244) !important; border-color: rgba(0,0,0,0.07) !important; } html[data-color-scheme="light"] #tab-nav button.tab-btn { color: rgb(100 100 110) !important; } html[data-color-scheme="light"] #tab-nav button.tab-btn:hover { color: rgb(var(--text-strong)) !important; background-color: rgba(0,0,0,0.04) !important; } html[data-color-scheme="light"] #tab-nav button.tab-btn.tab-active { color: rgb(var(--text-strong)) !important; } /* ───────────────────────────────────────────────────────────────────────────── K. BREADCRUMB, FOOTER, LAYOUT ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .breadcrumb-bar { background-color: rgba(0,0,0,0.03) !important; border-bottom-color: rgba(0,0,0,0.07) !important; } html[data-color-scheme="light"] .breadcrumb-bar a:hover { color: rgb(var(--text-strong)) !important; } html[data-color-scheme="light"] footer.site-footer { background-color: rgb(var(--surface-card)) !important; border-top-color: rgba(0,0,0,0.07) !important; } html[data-color-scheme="light"] footer.site-footer a:hover { color: rgb(var(--text-strong)) !important; } /* Subtle horizontal dividers (h-px lines) */ html[data-color-scheme="light"] .h-px.bg-white\/5 { background-color: rgba(0,0,0,0.05) !important; } html[data-color-scheme="light"] .h-\[1px\].bg-white\/5 { background-color: rgba(0,0,0,0.05) !important; } /* ───────────────────────────────────────────────────────────────────────────── L. DESIGN-TOKEN COMPONENT CLASSES (from design-tokens.css §11) ───────────────────────────────────────────────────────────────────────────── */ /* .btn-primary: white-on-dark → dark-on-light */ html[data-color-scheme="light"] .btn-primary { background: rgb(var(--text-strong)); color: rgb(var(--surface-page)); } html[data-color-scheme="light"] .btn-primary:hover { background: rgb(var(--text-default)); filter: none; } /* .btn-inverse: already uses text-strong/surface-page tokens — adapts automatically */ /* .btn-ghost: adapts automatically via surface-card/raised tokens */ /* .btn-ghost hover text */ html[data-color-scheme="light"] .btn-ghost:hover { color: rgb(var(--text-strong)); } /* .bento-card inner glow — white shimmer → dark shimmer */ html[data-color-scheme="light"] .bento-card::after { background: linear-gradient(135deg, rgba(0,0,0,0.04), transparent 40%, transparent 60%, rgba(0,0,0,0.02)); } /* .dropdown-container surface */ html[data-color-scheme="light"] .dropdown-menu { background-color: rgb(var(--surface-card)) !important; border-color: rgba(0,0,0,0.09) !important; } html[data-color-scheme="light"] .dropdown-divider { background-color: rgba(0,0,0,0.06) !important; } /* ───────────────────────────────────────────────────────────────────────────── M. SCROLLBAR ───────────────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } html[data-color-scheme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* ── Toggle button icon visibility (always loaded, both modes) ─────────────── */ /* Dark mode (default): show moon icon, hide sun icon */ .cs-toggle .cs-sun { display: none; } .cs-toggle .cs-moon { display: block; } /* Light mode: show sun icon, hide moon icon */ html[data-color-scheme="light"] .cs-toggle .cs-sun { display: block; } html[data-color-scheme="light"] .cs-toggle .cs-moon { display: none; } /* Color-scheme picker buttons in dropdown */ .cs-scheme-btn { opacity: 0.5; } .cs-scheme-btn[data-active="true"] { opacity: 1; background: var(--border-subtle); color: rgb(var(--text-strong)); } /* ── Body ───────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] body { background-color: rgb(var(--surface-page)); color: rgb(var(--text-default)); } /* Tailwind bg-background is hardcoded #09090b in the config */ html[data-color-scheme="light"] .bg-background, html[data-color-scheme="light"] .bg-card { background-color: rgb(var(--surface-page)) !important; } /* ── Glass Navbar ───────────────────────────────────────────────────────────── */ /* glass-navbar background is now token-based in base.html, but Tailwind body bg needs the override above to cascade correctly */ /* ── Brand name gradient ("from-white to-zinc-400" → dark gradient) ────────── */ html[data-color-scheme="light"] .brand-name { background-image: linear-gradient( to right, #09090b, #18181b ) !important; } /* ── Desktop nav links ──────────────────────────────────────────────────────── */ html[data-color-scheme="light"] header nav a { color: #18181b !important; } html[data-color-scheme="light"] header nav a:hover { color: rgb(var(--text-strong)) !important; background-color: var(--border-subtle) !important; --tw-shadow: none !important; } /* Active state (bg-zinc-800/50 text-white ring-white/10 → light equivalent) */ html[data-color-scheme="light"] header nav a.nav-link-active { background-color: var(--border-moderate) !important; color: rgb(var(--text-strong)) !important; --tw-ring-color: var(--border-moderate) !important; } /* ── Theme swatch ring-offset ───────────────────────────────────────────────── */ html[data-color-scheme="light"] [data-theme-btn] { --tw-ring-offset-color: rgb(var(--surface-active)) !important; } /* ── Color scheme toggle button ─────────────────────────────────────────────── */ html[data-color-scheme="light"] .cs-toggle { color: rgb(var(--text-faint)); } html[data-color-scheme="light"] .cs-toggle:hover { color: rgb(var(--text-strong)); background-color: var(--border-subtle); } /* ── Unauthenticated header buttons ─────────────────────────────────────────── */ /* "Sign In" */ html[data-color-scheme="light"] .auth-signin-link { color: rgb(var(--text-muted)) !important; } html[data-color-scheme="light"] .auth-signin-link:hover { color: rgb(var(--text-strong)) !important; } /* "Get Started" — white-button-on-dark → dark-button-on-light */ html[data-color-scheme="light"] .cta-get-started { background-color: rgb(var(--text-strong)) !important; color: rgb(var(--surface-page)) !important; box-shadow: none !important; } html[data-color-scheme="light"] .cta-get-started:hover { background-color: rgb(var(--text-default)) !important; } /* ── Mobile menu overlay ────────────────────────────────────────────────────── */ html[data-color-scheme="light"] #mobile-menu { background-color: rgb(var(--surface-page) / 0.97) !important; } html[data-color-scheme="light"] #mobile-menu nav a { color: rgb(var(--text-default)) !important; } html[data-color-scheme="light"] #mobile-menu nav a:hover { color: rgb(var(--text-strong)) !important; background-color: var(--border-subtle) !important; } html[data-color-scheme="light"] .mobile-separator { background-color: var(--border-standard) !important; } /* ── Breadcrumb bar ─────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] .breadcrumb-bar { background-color: var(--border-faint) !important; border-bottom-color: var(--border-standard) !important; } html[data-color-scheme="light"] .breadcrumb-bar a:hover { color: rgb(var(--text-strong)) !important; } /* ── Footer ─────────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] footer.site-footer { background-color: rgb(var(--surface-card)) !important; border-top-color: var(--border-standard) !important; } html[data-color-scheme="light"] footer.site-footer a:hover { color: rgb(var(--text-strong)) !important; } /* ── design-tokens.css component overrides ──────────────────────────────────── */ /* .btn-primary: white-on-dark → dark-on-light */ html[data-color-scheme="light"] .btn-primary { background: rgb(var(--text-strong)); color: rgb(var(--surface-page)); } html[data-color-scheme="light"] .btn-primary:hover { background: rgb(var(--text-default)); filter: none; } /* .btn-ghost hover text: #fafafa → token-based */ html[data-color-scheme="light"] .btn-ghost:hover { color: rgb(var(--text-strong)); } /* .bento-card inner glow — white shimmer invisible on white bg, use black */ html[data-color-scheme="light"] .bento-card::after { background: linear-gradient( 135deg, var(--border-moderate), transparent 40%, transparent 60%, var(--border-subtle) ); } /* ── Scrollbar ──────────────────────────────────────────────────────────────── */ html[data-color-scheme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); } html[data-color-scheme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } /* Light-mode fallback for alpha-white text utilities used in templates. */ html[data-color-scheme="light"] .text-white\/70 { color: rgb(var(--text-muted)) !important; } html[data-color-scheme="light"] .text-white\/60 { color: rgb(var(--text-soft)) !important; } html[data-color-scheme="light"] .text-white\/50 { color: rgb(var(--text-faint)) !important; } /* Widget tab readability tune-up in light mode. */ html[data-color-scheme="light"] #tab-widget .text-muted-foreground, html[data-color-scheme="light"] #tab-widget .text-ink-soft { color: rgb(var(--text-muted)) !important; } html[data-color-scheme="light"] #tab-widget .text-ink-faint { color: rgb(var(--text-soft)) !important; } html[data-color-scheme="light"] #tab-widget #widget-discard-btn:disabled { opacity: 0.62 !important; }