/**
 * Light appearance — load after styles.css and trade-themes.css (when used).
 * Trade accent variables stay from trade-themes; surfaces flip to light UI.
 */
html[data-theme="light"] .demo-noise {
  opacity: 0.035;
}

html[data-theme="light"] body.demo-body,
html[data-theme="light"] body.demo-body[data-trade="generic"],
html[data-theme="light"] body.demo-body[data-trade="auto"],
html[data-theme="light"] body.demo-body[data-trade="body"],
html[data-theme="light"] body.demo-body[data-trade="roofing"],
html[data-theme="light"] body.demo-body[data-trade="electrical"],
html[data-theme="light"] body.demo-body[data-trade="plumbing"],
html[data-theme="light"] body.demo-body[data-trade="hvac"],
html[data-theme="light"] body.demo-body[data-trade="fabrication"],
html[data-theme="light"] body.demo-body[data-trade="contractor"],
html[data-theme="light"] body.demo-body[data-trade="landscaping"],
html[data-theme="light"] body.demo-body[data-trade="towing"] {
  --black: #e8ecf2;
  --dark: #dfe5ee;
  --panel: #ffffff;
  --border: #c8d0dc;
  --white: #0f1419;
  --muted: #5c6672;
  --nav-bg: rgba(252, 253, 255, 0.96);
}

html[data-theme="light"] .crm-modal-scrim {
  background: rgba(15, 23, 42, 0.4);
}

html[data-theme="light"] .crm-modal-panel {
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
}

html[data-theme="light"] .ledger-table-scroll .demo-ledger-table th:first-child,
html[data-theme="light"] .ledger-table-scroll .demo-ledger-table td:first-child {
  box-shadow: 8px 0 12px -8px rgba(15, 23, 42, 0.12);
}

html[data-theme="light"][data-contrast="high"] body.demo-body {
  --border: #64748b;
}
html[data-theme="light"][data-contrast="high"] .demo-table td,
html[data-theme="light"][data-contrast="high"] .demo-table th {
  border-bottom-width: 2px;
}