/* ════════════════════════════════════════ Light mode — warm cream palette Activated by `data-theme="light"` on . Toggle implementation: - index.html: inline IIFE at end of body - tool pages: gold-standard.js injects toggle into header Preference key: localStorage['pb_theme'] ════════════════════════════════════════ */ /* ── Token overrides ──────────────────── Cascade to every element that uses var(--…). */ [data-theme="light"] { --bg: #FDFAF6; --s1: #F5EFE6; --s2: #EDE0D4; --text-1: #1A1A1A; --text-2: #4A3728; --text-3: #8C7B6E; --border: #E8DDD0; --border-s: rgba(120,80,40,0.08); --border-h: rgba(167,100,50,0.45); } /* ── Shared chrome (body, header, footer) — applies to every page ── */ [data-theme="light"] body { background: #FDFAF6; color: #1A1A1A; } [data-theme="light"] header { background: rgba(253,250,246,0.95); border-bottom-color: #E8DDD0; } [data-theme="light"] footer { background: rgba(245,239,230,0.9); border-top-color: #E8DDD0; } [data-theme="light"] .blob { opacity: 0.08; } [data-theme="light"] #starfield { opacity: 0.12; } /* ════════════════════════════════════════ HOMEPAGE-SPECIFIC Selectors only match elements on index.html. Harmless on tool pages (selectors don't bind). ════════════════════════════════════════ */ [data-theme="light"] .hero { background: linear-gradient(180deg, rgba(200,150,100,0.05) 0%, transparent 100%); } [data-theme="light"] .card { background: #F5EFE6; border-color: #E8DDD0; } [data-theme="light"] .card:hover { background: #EDE0D4; } [data-theme="light"] .price-chip { background: rgba(253,250,246,0.95); border-color: #E8DDD0; } [data-theme="light"] .price-chip.featured { background: rgba(200,150,100,0.1); } [data-theme="light"] .upgrade-strip { background: rgba(200,150,100,0.04); border-color: #E8DDD0; } [data-theme="light"] .cat-section { background: transparent; } [data-theme="light"] .search-input { background: #F5EFE6; border-color: #E8DDD0; color: #1A1A1A; } [data-theme="light"] .search-input::placeholder { color: #8C7B6E; } /* Homepage hero stats + privacy line + prove-it section + footer newsletter (moved from scattered inline rules in index.html). */ [data-theme="light"] .hero-stats { background: rgba(167,139,250,0.06); } [data-theme="light"] .hero-stat-label { color: #6B5A4D; } [data-theme="light"] .hero-privacy-guarantee { color: #1A7F5A; } [data-theme="light"] .prove-it-inner { background: radial-gradient(ellipse 80% 60% at 100% 0%, rgba(167,139,250,0.12) 0%, transparent 60%), linear-gradient(180deg, rgba(167,139,250,0.04) 0%, rgba(245,239,230,0.6) 100%); border-color: rgba(120,80,40,0.15); } [data-theme="light"] .demo-panel { background: #FFFFFF; border-color: rgba(52,211,153,0.42); box-shadow: 0 12px 32px rgba(120,80,40,0.12); } [data-theme="light"] .demo-stat { color: #6B5A4D; } [data-theme="light"] .demo-stat + .demo-stat { border-top-color: rgba(52,211,153,0.20); } [data-theme="light"] .footer-newsletter { color: #4A3728; } /* ════════════════════════════════════════ TOOL PAGES — generic selectors (Author-supplied block. Some selectors are speculative — kept for forward-compatibility with future markup.) ════════════════════════════════════════ */ /* Tool page panels */ [data-theme="light"] .panel-input, [data-theme="light"] .panel-output, [data-theme="light"] .tool-body, [data-theme="light"] .split-panel, [data-theme="light"] .input-panel, [data-theme="light"] .output-panel { background: #F5EFE6; border-color: #E8DDD0; } /* Settings/options bar */ [data-theme="light"] .settings-bar, [data-theme="light"] .toolbar, [data-theme="light"] .options-bar { background: #EDE0D4; border-color: #E8DDD0; } /* Select dropdowns */ [data-theme="light"] select, [data-theme="light"] .settings-bar select { background: #F5EFE6; color: #1A1A1A; border-color: #E8DDD0; } [data-theme="light"] select option { background: #F5EFE6; color: #1A1A1A; } /* Input and textarea — !important needed: tool inline rules set `background: rgba(0,0,0,0.22)` as shorthand which beats this in some Chrome cascade edge cases despite higher specificity. */ [data-theme="light"] textarea, [data-theme="light"] input[type="text"], [data-theme="light"] .code-input, [data-theme="light"] .input-area { background: #FDFAF6 !important; color: #1A1A1A !important; border-color: #E8DDD0 !important; } /* Output/code areas */ [data-theme="light"] .output-area, [data-theme="light"] .code-output, [data-theme="light"] pre, [data-theme="light"] code { background: #FDFAF6; color: #1A1A1A; } /* Status bar */ [data-theme="light"] .stats-bar, [data-theme="light"] .status-bar, [data-theme="light"] .sb-left, [data-theme="light"] .sb-right, [data-theme="light"] .tier-notice { background: #EDE0D4; border-color: #E8DDD0; color: #4A3728; } /* Gold Standard injected elements */ [data-theme="light"] .pb-history-drop, [data-theme="light"] .gs-overlay, [data-theme="light"] .gs-modal, [data-theme="light"] .prove-it-panel, [data-theme="light"] .pi-row { background: #F5EFE6; border-color: #E8DDD0; color: #1A1A1A; } /* Pills and toggles */ [data-theme="light"] .sbar-pill, [data-theme="light"] .pill, [data-theme="light"] .tog { background: #EDE0D4; color: #1A1A1A; border-color: #E8DDD0; } /* Buttons */ [data-theme="light"] .btn-secondary, [data-theme="light"] .btn-outline { background: #EDE0D4; color: #1A1A1A; border-color: #E8DDD0; } /* File drop zone */ [data-theme="light"] .drop-zone, [data-theme="light"] .dropzone { background: #FDFAF6; border-color: #C8B8A8; color: #6B5A4D; } /* Tab strips */ [data-theme="light"] .tab-strip, [data-theme="light"] .tabs, [data-theme="light"] .panel-tabs { background: #EDE0D4; border-color: #E8DDD0; } [data-theme="light"] .tab-btn, [data-theme="light"] .tab { color: #6B5A4D; } [data-theme="light"] .tab-btn.active, [data-theme="light"] .tab.active { color: #A78BFA; border-bottom-color: #A78BFA; } /* ════════════════════════════════════════ TOOL PAGES — supplemental (actual codebase class names) The user-supplied block above uses generic names that don't match what's actually in the markup. These rules target the real class names so the visual override actually takes effect. ════════════════════════════════════════ */ /* Real panel container (used as both input + output frame) */ [data-theme="light"] .glass-panel { background: rgba(253,250,246,0.85); border-color: #E8DDD0; } /* Real tool-page title bar */ [data-theme="light"] .tool-header { background: #FDFAF6; border-bottom-color: #E8DDD0; } /* Real settings-bar (overrides the rgba(22,19,34,0.98) inline value) */ [data-theme="light"] .settings-bar { background: #EDE0D4; border-bottom-color: #E8DDD0; } /* Real tab strips */ [data-theme="light"] .left-tabs, [data-theme="light"] .output-tabs { background: transparent; border-bottom-color: #E8DDD0; } /* Real tab buttons */ [data-theme="light"] .left-tab, [data-theme="light"] .output-tab { color: #6B5A4D; } [data-theme="light"] .left-tab.active, [data-theme="light"] .output-tab.active { color: #A78BFA; border-bottom-color: #A78BFA; } /* Tool input textareas (all naming variants) — !important per above note */ [data-theme="light"] .input-textarea, [data-theme="light"] .json-textarea, [data-theme="light"] .paste-textarea, [data-theme="light"] .txt-area { background: #FDFAF6 !important; color: #1A1A1A !important; border-color: #E8DDD0 !important; } [data-theme="light"] .input-textarea::placeholder, [data-theme="light"] .json-textarea::placeholder, [data-theme="light"] .paste-textarea::placeholder, [data-theme="light"] .txt-area::placeholder { color: #8C7B6E; } /* Real output code area (div, not 
) */
[data-theme="light"] .code-area {
  background: #FDFAF6;
  color: #1A1A1A;
}

/* Output panel header strip */
[data-theme="light"] .panel-header {
  background: rgba(245,239,230,0.7);
  border-bottom-color: #E8DDD0;
}

/* Output empty/info states */
[data-theme="light"] .output-empty { color: #8C7B6E; }
[data-theme="light"] .output-stat  { color: #6B5A4D; }
[data-theme="light"] .output-stat .val { color: #1A1A1A; }
[data-theme="light"] .char-count   { color: #6B5A4D; }

/* CSV/XML/Excel/SQL trust banner (green-tinted) — stays green-tinted */
[data-theme="light"] .trust-banner {
  background: rgba(52,211,153,0.06);
  border-bottom-color: rgba(52,211,153,0.25);
}

/* GS-injected chrome — gold-standard.js uses pb- prefix */
[data-theme="light"] .pb-history-drop {
  background: #F5EFE6;
  border-color: #E8DDD0;
  color: #1A1A1A;
  box-shadow: 0 8px 28px rgba(120,80,40,0.18);
}
[data-theme="light"] .pb-history-hdr  { color: #6B5A4D; border-bottom-color: #E8DDD0; }
[data-theme="light"] .pb-history-item { border-bottom-color: rgba(120,80,40,0.07); }
[data-theme="light"] .pb-history-item:hover { background: rgba(167,139,250,0.10); }
[data-theme="light"] .pb-hi-name { color: #1A1A1A; }
[data-theme="light"] .pb-hi-meta { color: #6B5A4D; }
[data-theme="light"] .pb-history-empty { color: #8C7B6E; }

[data-theme="light"] .pb-prove-it-panel {
  background: #F5EFE6;
  border-color: rgba(167,139,250,0.4);
  color: #1A1A1A;
  box-shadow: 0 8px 32px rgba(120,80,40,0.2);
}
[data-theme="light"] .pb-pi-label { color: #6B5A4D; }
[data-theme="light"] .pb-pi-value { color: #1A1A1A; }

[data-theme="light"] .pb-modal {
  background: #F5EFE6;
  border-color: rgba(167,139,250,0.3);
  color: #1A1A1A;
  box-shadow: 0 24px 64px rgba(120,80,40,0.25);
}
[data-theme="light"] .pb-modal-hdr { border-bottom-color: rgba(167,139,250,0.18); }
[data-theme="light"] .pb-modal-title { color: #1A1A1A; }
[data-theme="light"] .pb-modal-close { color: #6B5A4D; }
[data-theme="light"] .pb-modal-close:hover { color: #1A1A1A; background: rgba(0,0,0,0.06); }
[data-theme="light"] .pb-modal-footer { color: #8C7B6E; border-top-color: rgba(167,139,250,0.16); }
[data-theme="light"] kbd {
  background: #FDFAF6;
  border-color: #E8DDD0;
  color: #1A1A1A;
}
[data-theme="light"] .pb-kbd-plus,
[data-theme="light"] .pb-kbd-desc { color: #6B5A4D; }
[data-theme="light"] .pb-search-input {
  background: #FDFAF6;
  border-color: #E8DDD0;
  color: #1A1A1A;
}
[data-theme="light"] .pb-tool-name  { color: #4A3728; }
[data-theme="light"] .pb-tool-badge { color: #8C7B6E; }
[data-theme="light"] .pb-tool-item:hover,
[data-theme="light"] .pb-tool-item.pb-selected { background: rgba(167,139,250,0.12); }
[data-theme="light"] .pb-tool-item:hover .pb-tool-name,
[data-theme="light"] .pb-tool-item.pb-selected .pb-tool-name { color: #1A1A1A; }
[data-theme="light"] .pb-no-results,
[data-theme="light"] .pb-switcher-hint { color: #8C7B6E; }
[data-theme="light"] .pb-tier-notice {
  background: rgba(167,139,250,0.08);
  border-bottom-color: rgba(167,139,250,0.20);
  color: #6B5A4D;
}
[data-theme="light"] .pb-tier-notice a { color: #7C3AED; }

/* Theme toggle button (in tool headers, injected by gold-standard.js;
   inherits color via var() but its hover state references var(--border-h)
   — already handled by the token override). No extra rules needed. */