/* * light-mode.css — site-wide light palette (white + emerald). * * Applies when html[data-theme="light"] is set. The synchronous shim in * base.html chooses the theme based on: * 1. page exclusion (blogs/casestudies/docs → forced dark) * 2. localStorage.fildra-theme * 3. prefers-color-scheme: light * * Excluded reading surfaces (blogs, case studies, docs) never receive * data-theme="light" — they stay dark for long-form reading comfort. * * Why light mode: farmers work outdoors in bright sun where the dark * glassmorphism theme washes out. Off-white + slate text + emerald * accents stay readable at midday on low-end Android screens. */ html[data-theme="light"] { /* Backgrounds — clean and glare-resistant (#f8fafc is easier on the eyes than pure #fff, which can become its own glare source). */ --bg-body: #f8fafc; --bg-surface: #ffffff; --bg-surface-elevated: #f1f5f9; /* Text — high contrast for sunlight readability (deep slate hits ~14:1 on white, well above WCAG AAA 7:1). */ --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; --text-disabled: #94a3b8; --text-inverse: #ffffff; /* Surface ladder — flatter, no glass in light mode. */ --surface-0: #f8fafc; --surface-1: #ffffff; --surface-2: #f1f5f9; --surface-3: #e2e8f0; --surface-overlay: rgba(15, 23, 42, 0.16); /* Borders — thin slate replacing glass borders. */ --glass-border: rgba(15, 23, 42, 0.08); --glass-border-hover: rgba(15, 23, 42, 0.16); --border-hairline: 1px solid rgba(15, 23, 42, 0.08); --border-subtle: 1px solid rgba(15, 23, 42, 0.12); --border-emphasis: 1px solid rgba(16, 185, 129, 0.45); /* Glass tokens collapse to flat white — glass looks cheap on light bg. */ --glass-bg: #ffffff; --glass-bg-strong: #ffffff; --glass-blur: none; /* Shadows — softer for white surfaces. */ --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08); --shadow-md: 0 10px 35px rgba(15, 23, 42, 0.10); --shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.14); --shadow-xl: 0 30px 80px rgba(15, 23, 42, 0.18); --shadow-glow: 0 4px 15px rgba(16, 185, 129, 0.25); /* FieldVision tokens point at global light tokens — replaces the deleted :root[data-theme="light"] block in fieldvision_playground.css so the playground inherits the unified site palette. */ --fv-bg-dark: var(--surface-0); --fv-bg-card: var(--surface-1); --fv-bg-elevated: var(--surface-2); --fv-border: rgba(15, 23, 42, 0.12); --fv-border-active: rgba(16, 185, 129, 0.5); --fv-text-primary: var(--text-primary); --fv-text-secondary: var(--text-secondary); --fv-text-muted: var(--text-muted); --fv-glow-green: 0 0 30px rgba(16, 185, 129, 0.18); --fv-glow-blue: 0 0 40px rgba(99, 102, 241, 0.12); --fv-chlorophyll: var(--color-primary-dark); --fv-accent: var(--color-primary-dark); --fv-accent-primary: var(--color-primary-light); --fv-accent-cyan: #0891b2; --fv-surface: var(--surface-1); /* Pill / Tinted-surface light values — tint stays light, text becomes a strong 700-shade so contrast passes WCAG-AA. This is the exact bug that kept regressing in cv_models: tint and text were the same translucent rgba, so on white they were unreadable. Different tokens = bug structurally impossible. */ --pill-emerald-bg: rgba(16, 185, 129, 0.12); --pill-emerald-border: rgba(16, 185, 129, 0.45); --pill-emerald-text: #047857; --pill-indigo-bg: rgba(99, 102, 241, 0.12); --pill-indigo-border: rgba(99, 102, 241, 0.45); --pill-indigo-text: #3730a3; --pill-amber-bg: rgba(251, 191, 36, 0.18); --pill-amber-border: rgba(217, 119, 6, 0.45); --pill-amber-text: #92400e; --pill-slate-bg: rgba(148, 163, 184, 0.16); --pill-slate-border: rgba(100, 116, 139, 0.35); --pill-slate-text: #334155; --pill-rose-bg: rgba(244, 63, 94, 0.12); --pill-rose-border: rgba(244, 63, 94, 0.45); --pill-rose-text: #9f1239; --pill-pink-bg: rgba(236, 72, 153, 0.12); --pill-pink-border: rgba(236, 72, 153, 0.45); --pill-pink-text: #9d174d; --tinted-emerald-bg: rgba(16, 185, 129, 0.10); --tinted-emerald-text: #047857; --tinted-amber-bg: rgba(251, 191, 36, 0.16); --tinted-amber-text: #92400e; --tinted-rose-bg: rgba(244, 63, 94, 0.10); --tinted-rose-text: #9f1239; /* Playground namespace light overrides — closes the coverage gaps that Phase 4 of luminous-reddy committed to (FieldKB grads, FieldState semantic colours, FieldVision accent-danger/warning). The tinted-bg values stay soft (so the playground keeps its dark-mode-derived feel) but the text values flip to strong 700/800 shades so chrome stays legible on a light background. */ /* FieldKB decorative gradients — softened on white so the hero panel doesn't render dark-blue-on-white. */ --grad-1: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(56, 189, 248, 0.06), rgba(139, 92, 246, 0.04)); --grad-2: radial-gradient(1200px 600px at 20% 0%, rgba(16, 185, 129, 0.06), transparent 55%), radial-gradient(900px 500px at 80% 100%, rgba(56, 189, 248, 0.05), transparent 60%); /* FieldState semantic palette — bg-tints stay light, text-tokens become strong (700-shade) for WCAG-AA contrast on white. */ --fs-accent: #b45309; /* amber-700 (was #f59e0b) */ --fs-accent-dark: #78350f; /* amber-900 */ --fs-accent-glow: rgba(245, 158, 11, 0.18); --fs-accent-border: rgba(180, 83, 9, 0.45); --fs-urgent: #b91c1c; /* red-700 */ --fs-urgent-bg: rgba(248, 113, 113, 0.10); --fs-urgent-border: rgba(185, 28, 28, 0.40); --fs-watch: #92400e; /* amber-800 */ --fs-watch-bg: rgba(251, 191, 36, 0.14); --fs-watch-border: rgba(146, 64, 14, 0.40); --fs-good: #047857; /* emerald-700 */ --fs-good-bg: rgba(52, 211, 153, 0.10); --fs-good-border: rgba(4, 120, 87, 0.40); --fs-cta: #075985; /* sky-800 */ --fs-cta-bg: rgba(56, 189, 248, 0.12); --fs-cta-border: rgba(7, 89, 133, 0.40); --fs-icon-dx: rgba(248, 113, 113, 0.14); --fs-icon-dx-text: #b91c1c; --fs-icon-map: rgba(56, 189, 248, 0.14); --fs-icon-map-text: #075985; --fs-icon-kb: rgba(52, 211, 153, 0.14); --fs-icon-kb-text: #047857; --fs-icon-ctx: rgba(245, 158, 11, 0.14); --fs-icon-ctx-text: #b45309; /* FieldVision accent danger/warning — bright accents flip to strong shades for legibility. */ --fv-accent-warning: #92400e; /* amber-800 (was #fbbf24) */ --fv-accent-danger: #b91c1c; /* red-700 (was #f87171) */ } /* Override hardcoded dark backgrounds set in base.html. */ html[data-theme="light"] { background: #f8fafc; } html[data-theme="light"] body { background: #f8fafc; } /* Strip backdrop-filter site-wide in light mode — glass looks cheap on white and adds GPU cost for zero visual benefit. */ html[data-theme="light"] *, html[data-theme="light"] *::before, html[data-theme="light"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Section-alt bands become subtly tinted slate instead of dark glass. */ html[data-theme="light"] .page-section-alt, html[data-theme="light"] .products-section-alt, html[data-theme="light"] .home-section-muted, html[data-theme="light"] .market-section-muted, html[data-theme="light"] .about-section-alt { background: #f1f5f9; border-top-color: rgba(15, 23, 42, 0.08); border-bottom-color: rgba(15, 23, 42, 0.08); } /* Ambient glow / grid overlays softened — they were designed for dark. */ html[data-theme="light"] .ambient-glow, html[data-theme="light"] .grid-overlay { opacity: 0.15; filter: brightness(0.95); } /* Sun/moon icon swap inside the toggle button. */ html[data-theme="light"] .theme-toggle-btn .icon-when-dark { display: none; } html:not([data-theme="light"]) .theme-toggle-btn .icon-when-light { display: none; } /* ============================================================ Hardcoded-dark overrides — elements that bypassed CSS tokens ============================================================ Many components in base.html and page CSS use literal dark rgba() values instead of var(--surface-*) / var(--glass-bg). The token override above doesn't reach them — these explicit rules do. */ /* Navbar — root of the "FildraAI logo disappears" bug. base.html line 400 hardcodes rgba(15, 23, 42, 0.9). */ html[data-theme="light"] .navbar { background: rgba(248, 250, 252, 0.92); border-bottom-color: rgba(15, 23, 42, 0.08); } html[data-theme="light"] .navbar.scrolled { background: rgba(248, 250, 252, 0.98); border-bottom-color: rgba(16, 185, 129, 0.25); } /* Brand text + logo — defensive override so the wordmark is always dark. */ html[data-theme="light"] .navbar-brand, html[data-theme="light"] .brand-text { color: #0f172a !important; } /* Brand-logo green glow was designed for dark — soften on white. */ html[data-theme="light"] .brand-logo { filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.22)); } /* Nav links readable on the light navbar */ html[data-theme="light"] .nav-link { color: #334155 !important; } html[data-theme="light"] .nav-link.active, html[data-theme="light"] .nav-link:hover, html[data-theme="light"] .nav-link:focus { color: var(--color-primary-dark) !important; } /* Mobile hamburger toggler — base.html line 878 hardcodes a light-gray stroke (#e5e7eb) for dark mode, which is invisible on the light navbar. Re-stroke it dark to match the wordmark / nav links. */ html[data-theme="light"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%230f172a' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } /* Dropdown menus / items */ html[data-theme="light"] .dropdown-menu { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10); } html[data-theme="light"] .dropdown-item { color: var(--text-primary); } html[data-theme="light"] .dropdown-item:hover, html[data-theme="light"] .dropdown-item:focus { background: rgba(16, 185, 129, 0.08); color: var(--color-primary-dark); } html[data-theme="light"] .dropdown-item.active { background: rgba(16, 185, 129, 0.12); color: var(--color-primary-dark); } html[data-theme="light"] .dropdown-item i.text-muted { color: #64748b !important; } html[data-theme="light"] .dropdown-divider { border-color: rgba(15, 23, 42, 0.12); } /* Field-card — base.html hardcodes rgba(2, 6, 23, 0.58) */ html[data-theme="light"] .field-card { background: #ffffff; border-color: rgba(15, 23, 42, 0.10); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .field-card:hover { border-color: rgba(16, 185, 129, 0.45); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } /* Common card patterns — most hardcode dark glass backgrounds */ html[data-theme="light"] .content-card, html[data-theme="light"] .value-card, html[data-theme="light"] .value-narrative, html[data-theme="light"] .product-card, html[data-theme="light"] .feature-card, html[data-theme="light"] .chart-card, html[data-theme="light"] .sidebar-card, html[data-theme="light"] .mv-card, html[data-theme="light"] .belief-card, html[data-theme="light"] .info-card, html[data-theme="light"] .data-card, html[data-theme="light"] .module-card, html[data-theme="light"] .capability-card, html[data-theme="light"] .purpose-card, html[data-theme="light"] .workflow-step { background: #ffffff; border: 1px solid rgba(15, 23, 42, 0.10); box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05); } html[data-theme="light"] .product-card:hover, html[data-theme="light"] .value-card:hover, html[data-theme="light"] .content-card:hover, html[data-theme="light"] .feature-card:hover { border-color: rgba(16, 185, 129, 0.40); box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08); } /* Alert / Flash tokens — light-mode overrides. Re-bind the --alert-* vars at the theme scope so .alert-box-* AND .fildra-flash-* inherit the lightened palette automatically. */ html[data-theme="light"] { --alert-danger-bg: rgba(239, 68, 68, 0.10); --alert-danger-border: rgba(239, 68, 68, 0.55); --alert-danger-text: #991b1b; --alert-danger-icon: #dc2626; --alert-success-bg: rgba(16, 185, 129, 0.10); --alert-success-border: rgba(16, 185, 129, 0.55); --alert-success-text: #065f46; --alert-success-icon: #059669; --alert-warning-bg: rgba(251, 191, 36, 0.14); --alert-warning-border: rgba(245, 158, 11, 0.55); --alert-warning-text: #78350f; --alert-warning-icon: #d97706; --alert-info-bg: rgba(56, 189, 248, 0.10); --alert-info-border: rgba(14, 165, 233, 0.55); --alert-info-text: #075985; --alert-info-icon: #0284c7; } /* Tables — both common patterns */ html[data-theme="light"] .docs-params-table, html[data-theme="light"] table { background: #ffffff; color: var(--text-primary); border-color: rgba(15, 23, 42, 0.10); } html[data-theme="light"] .docs-params-table thead th, html[data-theme="light"] table thead th { background: #f8fafc; border-bottom: 1px solid rgba(15, 23, 42, 0.18); color: var(--text-primary); } html[data-theme="light"] .docs-params-table tbody td, html[data-theme="light"] table tbody td { border-bottom: 1px solid rgba(15, 23, 42, 0.10); color: var(--text-secondary); } html[data-theme="light"] .docs-params-table tbody tr:hover, html[data-theme="light"] table tbody tr:hover { background: #f8fafc; } /* Generic hr + horizontal section dividers */ html[data-theme="light"] hr { border-color: rgba(15, 23, 42, 0.12); background: transparent; } /* Section eyebrow ::before / ::after lines (faded slate gradient by default) */ html[data-theme="light"] .section-eyebrow::before, html[data-theme="light"] .section-eyebrow::after { background: linear-gradient(90deg, transparent, var(--color-primary-dark), transparent); } /* Section-index hairline (the green line in numbered section labels) */ html[data-theme="light"] .section-index-line { background: rgba(16, 185, 129, 0.55); } /* Hero / section titles often have dark text-shadow for legibility on dark. On white that shadow becomes grey halo — strip it. */ html[data-theme="light"] .hero-title, html[data-theme="light"] .section-title, html[data-theme="light"] .hero-title-highlight { text-shadow: none; } /* Section bands hardcoded rgba(2, 6, 23, 0.26) */ html[data-theme="light"] .market-section-muted, html[data-theme="light"] .home-section-muted, html[data-theme="light"] .page-section-alt, html[data-theme="light"] .products-section-alt, html[data-theme="light"] .about-section-alt { background: #f1f5f9 !important; border-top: 1px solid rgba(15, 23, 42, 0.10) !important; border-bottom: 1px solid rgba(15, 23, 42, 0.10) !important; } /* Form fields */ html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]), html[data-theme="light"] textarea, html[data-theme="light"] select { background: #ffffff; color: var(--text-primary); border-color: rgba(15, 23, 42, 0.16); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8; } html[data-theme="light"] input:focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15); } /* Footer — base.html footer uses dark hardcoded background */ html[data-theme="light"] footer, html[data-theme="light"] .site-footer, html[data-theme="light"] .footer-section { background: #f1f5f9; border-top: 1px solid rgba(15, 23, 42, 0.10); color: var(--text-secondary); } html[data-theme="light"] footer a { color: var(--text-secondary); } html[data-theme="light"] footer a:hover { color: var(--color-primary-dark); } /* Status strip on home — the field-card wrapper handles it via the field-card override above, but the status-index numbers + index lines need a tweak. */ html[data-theme="light"] .status-strip .status-kicker, html[data-theme="light"] .status-strip h3 { color: var(--text-primary); } html[data-theme="light"] .status-index { color: var(--color-primary-dark); } /* Catch-all: anything that uses var(--bg-surface) / var(--bg-surface-elevated) already gets the light value. Anything that hardcoded the dark navy needs the explicit overrides above. If more disappearing elements turn up, add the selectors here. */ /* ============================================================ Language switcher + Sign in button (navbar action buttons) ============================================================ */ /* .lang-btn hardcodes rgba(15, 23, 42, 0.96) in base.html line 562 */ html[data-theme="light"] .language-switcher .lang-btn { background: #ffffff; border-color: rgba(15, 23, 42, 0.16); color: var(--text-secondary); } html[data-theme="light"] .language-switcher .lang-btn:hover { background: #f8fafc; border-color: var(--color-primary-dark); color: var(--text-primary); } /* Sign in / generic ghost buttons in the navbar */ html[data-theme="light"] .navbar .btn-ghost, html[data-theme="light"] .navbar .btn.btn-ghost { background: transparent; color: var(--text-primary); border: 1px solid rgba(15, 23, 42, 0.16); } html[data-theme="light"] .navbar .btn-ghost:hover, html[data-theme="light"] .navbar .btn.btn-ghost:hover { background: #f8fafc; border-color: var(--color-primary); color: var(--color-primary-dark); } /* Theme toggle button itself — keep ghost styling consistent */ html[data-theme="light"] .theme-toggle-btn { background: transparent; color: var(--text-primary); border: 1px solid rgba(15, 23, 42, 0.16); } html[data-theme="light"] .theme-toggle-btn:hover { background: #f8fafc; border-color: var(--color-primary); color: var(--color-primary-dark); } /* Account menu avatar / button */ html[data-theme="light"] .account-menu .account-btn { color: var(--text-primary); border: 1px solid rgba(15, 23, 42, 0.16); } html[data-theme="light"] .account-menu .account-btn:hover { background: #f8fafc; border-color: var(--color-primary); } html[data-theme="light"] .account-avatar-initials { background: rgba(16, 185, 129, 0.12); color: var(--color-primary-dark); } /* ============================================================ Code blocks — used in /solutions/*, /docs/* API examples ============================================================ solutions_api.css line 308 hardcodes rgba(15, 23, 42, 0.95) background + #e2e8f0 text. Without override, dark-on-dark or light-on-light = invisible. Convert to a calm slate-on-cream palette that reads like a code listing on white. */ html[data-theme="light"] .code-block, html[data-theme="light"] .solutions-api-page .code-block { background: #f1f5f9; border: 1px solid rgba(15, 23, 42, 0.12); } html[data-theme="light"] .code-block pre, html[data-theme="light"] .code-block code, html[data-theme="light"] .solutions-api-page .code-block, html[data-theme="light"] .solutions-api-page .code-block pre, html[data-theme="light"] .solutions-api-page .code-block code { color: #0f172a; background: transparent; } /* Generic

 /  tags outside a wrapping .code-block */
html[data-theme="light"] pre {
  background: #f1f5f9;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] code {
  background: rgba(15, 23, 42, 0.06);
  color: #0f172a;
}
html[data-theme="light"] pre code {
  background: transparent;
}

/* ============================================================
   Docs / case-studies / blogs surfaces — now eligible for light mode
   ============================================================ */

/* Docs hero band */
html[data-theme="light"] .docs-hero {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .docs-hero h1 {
  color: var(--text-primary);
}
html[data-theme="light"] .docs-hero .lead {
  color: var(--text-secondary);
}

/* Breadcrumb + section nav (fv-docs-* family) */
html[data-theme="light"] .fv-docs-topbar {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .fv-docs-path,
html[data-theme="light"] .fv-docs-path a,
html[data-theme="light"] .fv-docs-path-sep {
  color: var(--text-secondary);
}
html[data-theme="light"] .fv-docs-path a:hover,
html[data-theme="light"] .fv-docs-path-current {
  color: var(--text-primary);
}
html[data-theme="light"] .fv-docs-nav-link {
  color: var(--text-secondary);
  background: transparent;
  border: 1px solid transparent;
}
html[data-theme="light"] .fv-docs-nav-link:hover {
  background: #f8fafc;
  color: var(--text-primary);
}
html[data-theme="light"] .fv-docs-nav-link.is-active {
  background: rgba(16, 185, 129, 0.10);
  color: var(--color-primary-dark);
  border-color: rgba(16, 185, 129, 0.30);
}

/* Table of contents */
html[data-theme="light"] .docs-toc {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .docs-toc h2 {
  color: var(--text-primary);
}
html[data-theme="light"] .docs-toc ul li a {
  color: var(--text-secondary);
}
html[data-theme="light"] .docs-toc ul li a:hover {
  color: var(--color-primary-dark);
}

/* Main docs content area + sections */
html[data-theme="light"] .docs-content,
html[data-theme="light"] .docs-detail-page,
html[data-theme="light"] .docs-detail-container {
  background: transparent;
  color: var(--text-primary);
}
html[data-theme="light"] .docs-section h2 {
  color: var(--text-primary);
  border-bottom-color: rgba(15, 23, 42, 0.12);
}
html[data-theme="light"] .docs-section p,
html[data-theme="light"] .docs-section li {
  color: var(--text-secondary);
}
html[data-theme="light"] .docs-section ul li::marker,
html[data-theme="light"] .docs-section ol li::marker {
  color: var(--color-primary-dark);
}

/* Docs/guides card surfaces — backgrounds were unmapped, leaving dark
   glass panels visible in light mode on FieldGuide / FieldKB docs and
   the guides index. */
html[data-theme="light"] .docs-section {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .category,
html[data-theme="light"] .access-option,
html[data-theme="light"] .docs-crops-group {
  background: #f8fafc;
  border-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .can-do {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.30);
}
html[data-theme="light"] .cannot-do {
  background: rgba(239, 68, 68, 0.06);
  border-color: rgba(239, 68, 68, 0.28);
}
html[data-theme="light"] .related-docs,
html[data-theme="light"] .related-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .docs-params-wrapper {
  border-color: rgba(15, 23, 42, 0.10);
}

/* Info / warning / highlight boxes — token-aware already but tighten on white */
html[data-theme="light"] .highlight-box {
  background: rgba(16, 185, 129, 0.06);
  border-color: rgba(16, 185, 129, 0.35);
}
html[data-theme="light"] .highlight-box h3 {
  color: var(--color-primary-dark);
}
html[data-theme="light"] .highlight-box p,
html[data-theme="light"] .highlight-box li {
  color: var(--text-primary);
}
html[data-theme="light"] .info-box {
  background: rgba(56, 189, 248, 0.08);
  border-color: rgba(56, 189, 248, 0.35);
}
html[data-theme="light"] .info-box h3 {
  color: #0284c7;
}
html[data-theme="light"] .info-box p,
html[data-theme="light"] .info-box li {
  color: var(--text-primary);
}
html[data-theme="light"] .warning-box {
  background: rgba(251, 191, 36, 0.10);
  border-color: rgba(251, 191, 36, 0.40);
}
html[data-theme="light"] .warning-box h3 {
  color: #b45309;
}
html[data-theme="light"] .warning-box p,
html[data-theme="light"] .warning-box li {
  color: var(--text-primary);
}

/* Blogs + case studies typically use .blog-card / .case-card patterns */
html[data-theme="light"] .blog-card,
html[data-theme="light"] .case-card,
html[data-theme="light"] .case-study-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .collection-card,
html[data-theme="light"] .docs-card {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .blog-card:hover,
html[data-theme="light"] .case-card:hover,
html[data-theme="light"] .docs-card:hover {
  border-color: rgba(16, 185, 129, 0.40);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* ============================================================
   Subtle subtitle / sub-header dividers
   ============================================================
   Pattern: border-bottom: 1px solid rgba(148, 163, 184, 0.1)
   In dark mode this faint-slate-on-dark reads as a divider.
   In light mode it becomes invisible on white. Bump opacity. */

html[data-theme="light"] [class*="-title"],
html[data-theme="light"] [class*="-subtitle"],
html[data-theme="light"] .section-subtitle,
html[data-theme="light"] .content-card-subtitle,
html[data-theme="light"] .sidebar-title,
html[data-theme="light"] h2,
html[data-theme="light"] h3,
html[data-theme="light"] h4 {
  border-bottom-color: rgba(15, 23, 42, 0.12) !important;
}

/* docs_shared.css lines 265, 459, 788, 795 — specific dividers */
html[data-theme="light"] .docs-section h2,
html[data-theme="light"] .docs-params-table thead th {
  border-bottom-color: rgba(15, 23, 42, 0.18) !important;
}
html[data-theme="light"] .docs-params-table tbody td {
  border-bottom-color: rgba(15, 23, 42, 0.10) !important;
}

/* ============================================================
   FieldChat / Ask AI widget (--fc-* token overrides)
   ============================================================
   ask_ai.css defines its own --fc-* namespace at :root. We override
   those tokens here so the chat panel matches the unified palette
   when html[data-theme="light"] is set. */

html[data-theme="light"] {
  --fc-bg-body: #ffffff;
  --fc-bg-surface: #ffffff;
  --fc-bg-surface-elevated: #f8fafc;
  --fc-text-primary: #0f172a;
  --fc-text-secondary: #475569;
  --fc-text-muted: #64748b;
  --fc-text-inverse: #ffffff;
  --fc-glass-bg: #ffffff;
  --fc-glass-bg-strong: #ffffff;
  --fc-glass-border: rgba(15, 23, 42, 0.12);
  --fc-glass-blur: none;
  --fc-shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.08);
  --fc-shadow-md: 0 10px 35px rgba(15, 23, 42, 0.10);
  --fc-shadow-lg: 0 20px 60px rgba(15, 23, 42, 0.14);
  --fc-shadow-glow: 0 4px 15px rgba(16, 185, 129, 0.22);
}

/* Strip the chat backdrop's dark scrim and blur in light mode */
html[data-theme="light"] .fieldchat-backdrop {
  background: rgba(15, 23, 42, 0.32);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ============================================================
   FieldChat widget — structural overrides
   ============================================================
   --fc-* token overrides above cover most of the widget, but several
   internal containers hardcode rgba dark values (ask_ai.css lines
   239, 843, 855). Override directly. */

html[data-theme="light"] .fieldchat-container {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.14);
}

html[data-theme="light"] .fieldchat-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
}
html[data-theme="light"] .fieldchat-title,
html[data-theme="light"] .fieldchat-header-title {
  color: var(--text-primary);
}
html[data-theme="light"] .fieldchat-btn-icon {
  color: var(--text-secondary);
  background: transparent;
}
html[data-theme="light"] .fieldchat-btn-icon:hover {
  background: rgba(15, 23, 42, 0.05);
  color: var(--text-primary);
}

html[data-theme="light"] .fieldchat-body,
html[data-theme="light"] .fieldchat-thread {
  background: #ffffff;
  color: var(--text-primary);
}
html[data-theme="light"] .fieldchat-thread {
  scrollbar-color: rgba(15, 23, 42, 0.3) transparent;
}
html[data-theme="light"] .fieldchat-thread::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.25);
}
/* Greeting: gradient text from ask_ai.css applies in both themes.
   See the later definitive override at the bottom of this file. */

html[data-theme="light"] .fieldchat-composer {
  background: #f8fafc;
  border-top: 1px solid rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .fieldchat-input-wrapper {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.16);
}
html[data-theme="light"] .fieldchat-input-wrapper:focus-within {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.20);
}
html[data-theme="light"] .fieldchat-composer-input {
  color: var(--text-primary);
}
html[data-theme="light"] .fieldchat-composer-input::placeholder {
  color: #94a3b8;
}

/* Chat message bubbles — most pages use these inside the thread */
html[data-theme="light"] .fieldchat-msg.user .fieldchat-msg-bubble {
  background: rgba(16, 185, 129, 0.12);
  color: var(--text-primary);
  border: 1px solid rgba(16, 185, 129, 0.30);
}
html[data-theme="light"] .fieldchat-msg.assistant .fieldchat-msg-bubble,
html[data-theme="light"] .fieldchat-msg.bot .fieldchat-msg-bubble {
  background: #f1f5f9;
  color: var(--text-primary);
  border: 1px solid rgba(15, 23, 42, 0.10);
}

/* Send button keeps its primary green gradient — that's the call to action */

/* ============================================================
   Hero evidence — Common Rust scanner card (home.html)
   ============================================================
   home.html lines 16-20 define a --field-* page-local namespace
   with hardcoded rgba(2,6,23,...) dark values. Override the tokens
   in light mode, plus the components that hardcode their own bg. */

html[data-theme="light"] {
  --field-surface: #ffffff;
  --field-surface-strong: #ffffff;
  --field-border: rgba(15, 23, 42, 0.10);
  --field-border-strong: rgba(16, 185, 129, 0.40);
  --field-muted-line: rgba(15, 23, 42, 0.10);
}

html[data-theme="light"] .hero-evidence {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* The scanner-container keeps a dark/imaging background so the leaf photo
   sits on its natural backdrop. Just soften the border. */
html[data-theme="light"] .scanner-container {
  border-color: rgba(15, 23, 42, 0.20);
}

html[data-theme="light"] .diagnosis-card {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
}
html[data-theme="light"] .diagnosis-text h4 {
  color: var(--text-primary);
}
html[data-theme="light"] .diagnosis-text p {
  color: var(--text-secondary);
}
html[data-theme="light"] .diagnosis-method {
  background: rgba(16, 185, 129, 0.10);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-primary-dark);
}
html[data-theme="light"] .diagnosis-meta {
  border-top-color: rgba(15, 23, 42, 0.10);
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .meta-label {
  color: var(--text-muted);
}
html[data-theme="light"] .meta-value {
  color: var(--text-primary);
}

html[data-theme="light"] .confidence-title,
html[data-theme="light"] .confidence-badge {
  color: var(--text-primary);
}
html[data-theme="light"] .confidence-label {
  color: var(--text-secondary);
}
html[data-theme="light"] .confidence-percent {
  color: var(--text-primary);
}

/* Confidence track — darker on white so the bar is readable */
html[data-theme="light"] .confidence-bar {
  background: rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .confidence-fill {
  background: var(--color-primary-dark);
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.22);
}

html[data-theme="light"] .diagnosis-disclaimer {
  border-top-color: rgba(15, 23, 42, 0.10);
  color: var(--text-muted);
}

/* ============================================================
   Console container — solutions/index.html "API workflow" snippet
   ============================================================
   .console-* family hardcodes rgba(15,23,42,…) backgrounds.
   .code-* tokens use very pale colors (#a5b4fc, #86efac) that are
   unreadable on white. Re-tune for a calm light-on-slate console. */

html[data-theme="light"] .console-container {
  background: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 12px 36px rgba(15, 23, 42, 0.18);
}
html[data-theme="light"] .console-header {
  background: #1e293b;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
html[data-theme="light"] .console-title {
  color: #cbd5e1;
}
html[data-theme="light"] .console-body {
  color: #e2e8f0;
}

/* Console body text — light slate panel needs dark text */
html[data-theme="light"] .console-container {
  background: #f1f5f9;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .console-header {
  background: #e2e8f0;
  border-bottom-color: rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .console-title {
  color: var(--text-secondary);
}
html[data-theme="light"] .console-body {
  color: #0f172a;
}
/* Syntax token colors — darker variants for light backgrounds.
   These tokens (.code-key, .code-string, etc.) are used in the API
   workflow console on solutions/index.html. */
html[data-theme="light"] .code-comment { color: #64748b; }
html[data-theme="light"] .code-key     { color: #4338ca; }  /* indigo-700 */
html[data-theme="light"] .code-string  { color: #15803d; }  /* green-700 */
html[data-theme="light"] .code-number  { color: #b45309; }  /* amber-700 */
html[data-theme="light"] .code-method  { color: #1d4ed8; }  /* blue-700 */

/* ============================================================
   Docs / blogs / case studies — page-local :root override defeat
   ============================================================
   docs/index.html, blogs/index.html, casestudies/index.html each
   declare their own :root { --fv-*: #020617; ... } block which sets
   their --fv-* tokens to dark. My html[data-theme="light"] selector
   has higher specificity (0,1,1 > 0,1,0) so the variable values DO win.
   The real culprit is `.fv-docs-page { background: radial-gradient(... #020617) }`
   which doesn't use a variable — we override the rule directly. */

html[data-theme="light"] .fv-docs-page {
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.06), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(52, 211, 153, 0.05), transparent 55%),
    #f8fafc;
  color: var(--text-primary);
}

/* Re-darken --fv-* accent tokens in light mode — the page-local
   --fv-accent-primary: #34d399 and --fv-accent-secondary: #38bdf8
   are emerald/sky which look pale on white. Push to deeper tones. */
html[data-theme="light"] {
  --fv-accent-primary: #047857;     /* deep emerald — readable on white */
  --fv-accent-secondary: #0369a1;   /* deep sky — readable on white */
  --fv-border: rgba(15, 23, 42, 0.10);
  --fv-border-soft: rgba(15, 23, 42, 0.08);
  --fv-glow-soft: 0 4px 16px rgba(15, 23, 42, 0.06);
}

/* fv-docs-path breadcrumb pill — page-local has a hardcoded dark
   radial-gradient background. Override directly. */
html[data-theme="light"] .fv-docs-path {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-secondary);
}
html[data-theme="light"] .fv-docs-path a {
  color: var(--text-secondary);
}
html[data-theme="light"] .fv-docs-path a:hover,
html[data-theme="light"] .fv-docs-path-current {
  color: var(--text-primary);
}

/* fv-btn-primary / fv-btn-secondary — typically have hardcoded
   dark backgrounds. Solid emerald primary + ghost secondary. */
html[data-theme="light"] .fv-btn-primary {
  background: var(--color-primary-dark);
  color: #ffffff;
  border: 1px solid var(--color-primary-dark);
}
html[data-theme="light"] .fv-btn-primary:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}
html[data-theme="light"] .fv-btn-secondary {
  background: #ffffff;
  color: var(--text-primary);
  border: 1px solid rgba(15, 23, 42, 0.16);
}
html[data-theme="light"] .fv-btn-secondary:hover {
  background: #f8fafc;
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* fv-card / fv-section / fv-bento / fv-tile — common card patterns
   in docs/blogs/casestudies. Page-local CSS often hardcodes
   var(--fv-bg-card) which is overridden, but some hardcode rgba. */
html[data-theme="light"] [class*="fv-card"],
html[data-theme="light"] [class*="fv-section"],
html[data-theme="light"] [class*="fv-bento"],
html[data-theme="light"] [class*="fv-tile"],
html[data-theme="light"] [class*="fv-panel"],
html[data-theme="light"] [class*="fv-block"] {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
}

/* Generic .fv-* text elements — force dark text in light mode */
html[data-theme="light"] [class*="fv-"] h1,
html[data-theme="light"] [class*="fv-"] h2,
html[data-theme="light"] [class*="fv-"] h3,
html[data-theme="light"] [class*="fv-"] h4,
html[data-theme="light"] [class*="fv-"] h5,
html[data-theme="light"] [class*="fv-"] h6 {
  color: var(--text-primary);
}
html[data-theme="light"] [class*="fv-"] p,
html[data-theme="light"] [class*="fv-"] li {
  color: var(--text-secondary);
}
html[data-theme="light"] [class*="fv-eyebrow"],
html[data-theme="light"] [class*="fv-label"],
html[data-theme="light"] [class*="fv-tag"] {
  color: var(--color-primary-dark);
}

/* ============================================================
   Gradient-text headings → solid dark in light mode
   ============================================================
   .hero-title-highlight, .text-gradient, .grad and similar use
   background-clip:text with the brand gradient (emerald→indigo)
   which renders as cyan/teal text — visible but pale on white.
   Switch to solid dark slate so headings read like proper headings. */

html[data-theme="light"] .hero-title-highlight,
html[data-theme="light"] .text-gradient,
html[data-theme="light"] .grad,
html[data-theme="light"] .value-number,
html[data-theme="light"] .fv-hero-title,
html[data-theme="light"] .fv-page-title,
html[data-theme="light"] .fv-section-title,
html[data-theme="light"] .fv-card-title,
html[data-theme="light"] .fs-hero-title,
html[data-theme="light"] .fg-hero-title,
html[data-theme="light"] .fa-hero-title,
html[data-theme="light"] .fc-hero-title {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: var(--text-primary) !important;
  color: var(--text-primary) !important;
}

/* ============================================================
   Guides + docs-hero-meta + link-pills (page-local CSS in
   guides/index, blogs/index, casestudies/index, docs/index)
   ============================================================
   These have hardcoded rgba(15, 23, 42, ...) backgrounds and
   light text. Light-mode overrides flip the surface to white
   with deep slate text. */

/* Docs hero meta — row of pill-shaped tags below the page title */
html[data-theme="light"] .docs-hero-meta {
  color: var(--text-secondary);
}
html[data-theme="light"] .docs-hero-meta span {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-secondary);
}

/* Featured guide card — the big highlighted card on guides index */
html[data-theme="light"] .featured-guide {
  background:
    radial-gradient(circle at top left, rgba(16, 185, 129, 0.06), transparent 55%),
    #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .featured-guide:hover {
  border-color: var(--color-primary);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .featured-guide h3 {
  color: var(--text-primary);
}
html[data-theme="light"] .featured-guide p {
  color: var(--text-secondary);
}

/* Guide pill / tag — small text labels inside the cards */
html[data-theme="light"] .guide-pill,
html[data-theme="light"] .guide-tag {
  border-color: rgba(15, 23, 42, 0.16);
  color: var(--text-secondary);
  background: transparent;
}
html[data-theme="light"] .guide-meta {
  color: var(--text-muted);
}

/* Guide card grid — secondary guide cards below the featured one */
html[data-theme="light"] .guide-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
html[data-theme="light"] .guide-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
}

/* Link pills — uppercase mono pills used as inline CTA links */
html[data-theme="light"] .link-pill {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.16);
  color: var(--text-secondary);
}
html[data-theme="light"] .link-pill:hover {
  background: rgba(16, 185, 129, 0.06);
  border-color: var(--color-primary);
  color: var(--color-primary-dark);
}

/* ============================================================
   Code container — Python example listing
   (solutions/diagnosis.html lines 105-130)
   ============================================================
   Originally a slate-900 panel with light syntax colors. Per
   captain's call this round, code listings should be LIGHT in
   light mode (matches GitHub light-theme convention). */

html[data-theme="light"] .code-container {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.12);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
}
html[data-theme="light"] .code-header {
  background: #e2e8f0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.10);
}
html[data-theme="light"] .code-label {
  color: var(--text-secondary);
}
html[data-theme="light"] .copy-btn {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.16);
  color: var(--text-primary);
}
html[data-theme="light"] .copy-btn:hover {
  background: var(--color-primary-dark);
  color: #ffffff;
  border-color: var(--color-primary-dark);
}
html[data-theme="light"] .code-block pre {
  color: #0f172a;
}

/* Python syntax-highlight classes on .code-block — darker variants
   for readability on white. Distinct from .code-* used by console. */
html[data-theme="light"] .code-block .comment { color: #64748b; }
html[data-theme="light"] .code-block .string  { color: #15803d; }  /* green-700 */
html[data-theme="light"] .code-block .keyword { color: #6d28d9; }  /* violet-700 */
html[data-theme="light"] .code-block .method  { color: #b45309; }  /* amber-700 */
html[data-theme="light"] .code-block .url     { color: #15803d; }  /* green-700 */
html[data-theme="light"] .code-block .number  { color: #b45309; }
html[data-theme="light"] .code-block .field   { color: #b45309; }
html[data-theme="light"] .code-block .bool    { color: #c2410c; }  /* orange-700 */

/* ============================================================
   Playground namespaces — token overrides
   ============================================================
   The playground CSS files each define their own --fk-* / --fm-*
   / --fa-* / --fs-* / --fv-* token namespace at :root with hardcoded
   dark values. Override each in light mode so playground containers
   inherit the unified palette without rewriting the playground CSS. */

/* fieldkb_playground.css — uses --fv-* namespace (same as FieldVision).
   Site-wide --fv-* override above already covers most. Add what's local. */
html[data-theme="light"] {
  --fv-bg-dark:       #f8fafc;
  --fv-bg-card:       #ffffff;
  --fv-bg-elevated:   #ffffff;
  --fv-border:        rgba(15, 23, 42, 0.12);
  --fv-border-strong: rgba(16, 185, 129, 0.45);
  --fv-glow-green:    0 0 24px rgba(16, 185, 129, 0.12);

  /* fieldaudio --fa-* namespace */
  --fa-surface:        #ffffff;
  --fa-surface-raised: #f8fafc;
  --fa-border:         rgba(15, 23, 42, 0.10);
  --fa-border-accent:  rgba(16, 185, 129, 0.40);
  --fa-text:           #0f172a;
  --fa-text-muted:     #475569;
  --fa-text-dim:       #64748b;
  --fa-accent-glow:    rgba(16, 185, 129, 0.10);
  --fa-shadow:         0 4px 16px rgba(15, 23, 42, 0.06);

  /* fieldstate --fs-* namespace */
  --fs-surface:        #ffffff;
  --fs-surface-raised: #f8fafc;
  --fs-surface-deep:   #f1f5f9;
  --fs-border:         rgba(15, 23, 42, 0.10);
  --fs-border-mid:     rgba(15, 23, 42, 0.14);
  --fs-text:           #0f172a;
  --fs-text-secondary: #475569;
  --fs-text-muted:     #64748b;
  --fs-accent-glow:    rgba(245, 158, 11, 0.10);
  --fs-urgent-bg:      rgba(248, 113, 113, 0.10);
  --fs-watch-bg:       rgba(251, 191, 36, 0.12);
  --fs-good-bg:        rgba(16, 185, 129, 0.10);
  --fs-cta-bg:         rgba(56, 189, 248, 0.10);
  /* icon backgrounds — keep tints but lighter */
  --fs-icon-dx:        rgba(248, 113, 113, 0.12);
  --fs-icon-map:       rgba(56, 189, 248, 0.12);
  --fs-icon-kb:        rgba(16, 185, 129, 0.12);
  --fs-icon-ctx:       rgba(245, 158, 11, 0.14);
  --fs-icon-img:       rgba(15, 23, 42, 0.06);
  --fs-icon-img-text:  #475569;
}

/* fieldmap_playground.css uses .fieldmap-page wrapper. No token
   namespace — direct rules. Add core overrides. */
html[data-theme="light"] .fieldmap-page {
  color: var(--text-primary);
}
html[data-theme="light"] .fieldmap-page .map-shell,
html[data-theme="light"] .fieldmap-page .map-card,
html[data-theme="light"] .fieldmap-page .legend-card,
html[data-theme="light"] .fieldmap-page .region-card,
html[data-theme="light"] .fieldmap-page [class*="-card"],
html[data-theme="light"] .fieldmap-page [class*="-shell"],
html[data-theme="light"] .fieldmap-page [class*="-panel"] {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
}

/* Playground catch-all: any element inside a playground that uses
   the .pg-* shared class family. playground_shared.css line 508+
   hardcodes rgba(15, 23, 42, 0.24). */
html[data-theme="light"] .pg-workspace,
html[data-theme="light"] .pg-mode-tabs,
html[data-theme="light"] .pg-mode-tab,
html[data-theme="light"] .pg-context-bar,
html[data-theme="light"] .pg-ctx-item,
html[data-theme="light"] .pg-workspace-actions,
html[data-theme="light"] [class^="pg-"] {
  color: var(--text-primary);
}
html[data-theme="light"] .pg-mode-tab {
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.10);
  color: var(--text-secondary);
}
html[data-theme="light"] .pg-mode-tab:hover,
html[data-theme="light"] .pg-mode-tab.active {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.35);
  color: var(--color-primary-dark);
}
html[data-theme="light"] .pg-context-bar {
  background: #f8fafc;
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html[data-theme="light"] .pg-ctx-label {
  color: var(--text-muted);
}
html[data-theme="light"] .pg-ctx-value {
  color: var(--text-primary);
}

/* fieldkb-specific containers that hardcode dark rgba.
   fieldkb_playground.css uses ~14 component rules with hardcoded
   rgba(2,6,23,...) / rgba(15,23,42,...) / rgba(15,22,41,...)
   backgrounds. Token overrides don't reach those — we target the
   specific class families directly. */
html[data-theme="light"] .fieldkb-page,
html[data-theme="light"] .fieldkb-shell,
html[data-theme="light"] .fieldkb-pill,
html[data-theme="light"] .fieldkb-hero-badge,
html[data-theme="light"] .fieldkb-answer-card,
html[data-theme="light"] .fieldkb-retrieval-card,
html[data-theme="light"] [class^="fieldkb-card"],
html[data-theme="light"] [class*="fieldkb-card"],
html[data-theme="light"] [class*="fieldkb-section"],
html[data-theme="light"] [class*="fieldkb-panel"],
html[data-theme="light"] [class*="fieldkb-answer"],
html[data-theme="light"] [class*="fieldkb-retrieval"] {
  background: #ffffff !important;
  border-color: rgba(15, 23, 42, 0.10);
  color: var(--text-primary);
}

/* fieldkb image-box keeps a dark backdrop (it's an image canvas) */
html[data-theme="light"] .fieldkb-image-box {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.16);
}

/* Chat / message rows in fieldkb */
html[data-theme="light"] .chat-messages {
  background: #f8fafc;
}
html[data-theme="light"] .chat-messages::-webkit-scrollbar-track {
  background: #e2e8f0;
}

/* fieldkb_playground.css component overrides (was a known follow-up
   in earlier rounds — now retokenized at source, but keep these for
   any stragglers using direct rgba). */

/* ============================================================
   Auth pages (login / signup / forgot / reset / confirm)
   ============================================================
   .auth-input hardcodes rgba(15, 23, 42, 0.85). All auth widgets
   live in template-local