/* Component surfaces must stay opaque above overlays. Loaded after utility CSS.
   Important declarations intentionally override the legacy light utility remaps. */
html[data-theme="light"] {
  --surface: #ffffff;
  --surface-soft: #f1f5f9;
  --ink: #0f172a;
  --ink-muted: #475569;
  --line: #cbd5e1;
  --accent: #0f766e;
}

html[data-theme="light"] :is(.screener-page .sidebar, .notification-panel,
  .notification-toast, .pro-dash-modal-card, #pro_drawer_panel) {
  background: var(--surface) !important;
  color: var(--ink);
  border-color: var(--line) !important;
  box-shadow: 0 16px 48px rgba(15,23,42,.16);
}
html[data-theme="light"] :is(.report-card, .report-stat, .valuation-stat,
  .earnings-status-card, .signal-item, .guided-preset, .signal-filter-card,
  .screener-count, .insight-dropdown, .pro-dash-panel, .pro-dash-panel-soft,
  .index-prose details) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  color: var(--ink);
  box-shadow: 0 4px 16px rgba(15,23,42,.05);
}
html[data-theme="light"] :is(.screener-toolbar, .filter-drawer-header, .filter-actions,
  .mobile-screener-bar, .mobile-report-tabs, .mobile-bottom-nav) {
  background: var(--surface) !important;
  border-color: var(--line) !important;
  box-shadow: 0 4px 20px rgba(15,23,42,.08);
}
html[data-theme="light"] .screener-filter-backdrop {
  background: rgba(15,23,42,.32);
  backdrop-filter: blur(4px);
}
html[data-theme="light"] :is(.mobile-filter-helper, .mobile-filter-helper.is-pending) {
  background: #f0fdfa;
  border-color: #99d5cd;
  color: #115e59;
}
html[data-theme="light"] .mobile-filter-helper strong { color: #854d0e; }
html[data-theme="light"] :is(.filter-drawer-state, .guided-preset-icon,
  .filter-drawer-count, .mobile-toolbar-filter, .pro-metric-lock .pro-unlock) {
  color: var(--accent);
}
html[data-theme="light"] :is(.pro-metric-lock span, .report-label,
  .valuation-stat span, .guided-preset-body .preset-sub) { color: var(--ink-muted); }
html[data-theme="light"] .pro-metric-lock .pro-unlock { color: var(--accent); }
html[data-theme="light"] .pro-metric-lock:hover { background: #f0fdfa !important; border-color: #0f766e !important; }
html[data-theme="light"] .filter-drawer-handle { background: #94a3b8; }
html[data-theme="light"] :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]), textarea, select) {
  background-color: var(--surface) !important;
  color: var(--ink) !important;
  border-color: var(--line) !important;
}
html[data-theme="light"] :is(input, textarea)::placeholder { color: #64748b !important; opacity: 1; }
html[data-theme="light"] :is(input, textarea, select):disabled {
  background-color: var(--surface-soft) !important;
  color: var(--ink-muted) !important;
}
html[data-theme="light"] :is(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
html[data-theme="light"] :is(.filter-apply-btn, .mobile-bottom-filter) {
  background: #0f766e;
  color: #ffffff !important;
}
html[data-theme="light"] .filter-apply-btn:hover { background: #115e59; }
html[data-theme="light"] [class~="bg-indigo-600/90"][class~="text-white"] { color: #ffffff !important; }
html[data-theme="light"] .screener-table tbody td { box-shadow: none; }
html[data-theme="light"] .screener-table tbody tr { background: #ffffff !important; }
html[data-theme="light"] .screener-table tbody tr:hover { background: #f0fdfa !important; }
html[data-theme="light"] .screener-table :is(.value-main, .cell-index) { color: var(--ink); }
html[data-theme="light"] input[type="range"]::-webkit-slider-thumb { box-shadow: 0 0 0 2px #ffffff; }
html[data-theme="light"] input[type="range"]::-moz-range-thumb { box-shadow: 0 0 0 2px #ffffff; }

/* Semantic badges retain their meaning without dark-mode pastel text. */
html[data-theme="light"] :is(.badge-valuation-very-cheap, .badge-valuation-cheap) { color: #155e75; background: #ecfeff; }
html[data-theme="light"] .badge-valuation-fair { color: #854d0e; background: #fefce8; }
html[data-theme="light"] :is(.badge-valuation-expensive, .badge-valuation-very-expensive) { color: #991b1b; background: #fef2f2; }
html[data-theme="light"] :is(.badge-risk-low, .badge-trend-bullish) { color: #166534; background: #f0fdf4; }
html[data-theme="light"] :is(.badge-risk-moderate, .badge-trend-neutral) { color: #6b21a8; background: #faf5ff; }
html[data-theme="light"] :is(.badge-risk-high, .badge-trend-bearish) { color: #9a3412; background: #fff7ed; }
html[data-theme="light"] :is(.detail-toggle, .detail-toggle:hover) { color: #1e40af; background: #eff6ff; }
html[data-theme="light"] .metric-tip { color: #334155; background: #e2e8f0; }
html[data-theme="light"] .indices-pro-kicker { color: #854d0e; }
html[data-theme="light"] .legal-content :is(p, li, td) { color: #334155; }
html[data-theme="light"] .legal-content :is(h1, h2, h3, strong, th) { color: #0f172a; }
html[data-theme="light"] .legal-content a { color: #0f766e; }
/* Editorial and legal pages also use legacy gray utilities and prose-invert. */
html[data-theme="light"] :is(.prose, .prose-invert) {
  color: #334155;
  --tw-prose-body: #334155;
  --tw-prose-headings: #0f172a;
  --tw-prose-links: #0f766e;
  --tw-prose-bold: #0f172a;
  --tw-prose-counters: #475569;
  --tw-prose-bullets: #64748b;
}
html[data-theme="light"] :is([class~="text-gray-100"], [class~="text-gray-200"], [class~="text-gray-300"]) { color: #334155 !important; }
html[data-theme="light"] :is([class~="text-gray-400"], [class~="text-gray-500"]) { color: #475569 !important; }
html[data-theme="light"] :is(.analytics-table th, .analytics-table td, .detail-item) { background: #ffffff; border-color: #cbd5e1; }
html[data-theme="light"] .guided-preset-icon { color: #0f766e; }
html[data-theme="light"] :is(.filter-drawer-meta, .guided-preset-badge) { color: #0f766e; }
html[data-theme="light"] :is([data-pro-only="1"], .guided-preset) { opacity: 1; }
html[data-theme="light"] :is([class~="text-blue-200"], [class~="text-blue-300"]) { color: #1e40af !important; }
html[data-theme="light"] :is([class~="text-violet-200"], [class~="text-violet-300"], [class~="text-purple-300"]) { color: #6b21a8 !important; }