/* Shared palette: components retain their original light colours as fallbacks. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  color: #e7e7e7;
  background: #181818;
  --theme-surface: #1f1f1f;
  --theme-soft: #272727;
  --theme-raised: #313131;
  --theme-text: #e7e7e7;
  --theme-muted: #b5b5b5;
  --theme-on-accent: #ffffff;
  --theme-border: #454545;
  --theme-focus: #a9cba7;
  --theme-warning: #e9c18d;
  --theme-danger: #f3aaa2;
  --theme-info: #a5c9eb;
  --theme-chart-grid: #454545;
  --theme-chart-accent: #a9cba7;
  --theme-shadow: #000000;
  --green: #a9cba7;
  --accent: #313131;
  --muted: #b5b5b5;
  --border: #454545;
  --surface: #1f1f1f;
  --bg: #181818;
}
:root[data-theme="dark"] .btn.primary { background:#313131; border-color:#778f76; color:#fff; }
:root[data-theme="dark"] .btn.primary:hover { background:#272727; }
:root[data-theme="dark"] .brand-mark b,
:root[data-theme="dark"] .dash-bar span,
:root[data-theme="dark"] .readiness-track i { background:#a9cba7; }
:root[data-theme="dark"] .day-track { background:#272727; }
:root[data-theme="dark"] .planned-shift { background:#313131; }
:root[data-theme="dark"] .work-cells button { background:color-mix(in srgb,#a9cba7 calc(var(--heat)*100%),#272727); }
:root[data-theme="dark"] .dash-chart [stroke="#e5e8e4"] { stroke:#454545; }
:root[data-theme="dark"] .dash-chart [stroke="#3e6d5b"],
:root[data-theme="dark"] .dash-chart [stroke="#b7cfbe"] { stroke:#a9cba7; }
:root[data-theme="dark"] .dash-chart [fill="#3e6d5b"] { fill:#a9cba7; }
:root[data-theme="dark"] .dash-chart [fill="#cbd5c6"] { fill:#7b967e; }
.theme-toggle { min-height:32px; font-size:12px; line-height:16px; }
@media(max-width:600px) { .topbar-right { gap:8px; } .theme-toggle { padding:8px; } }
:root[data-theme="dark"] .period-presets .active { background:#313131; color:#e7e7e7; border-color:#a9cba7; }
:root[data-theme="dark"] .score-dot,
:root[data-theme="dark"] .legend-line { background:#a9cba7; }
:root[data-theme="dark"] .record-bar,
:root[data-theme="dark"] .legend-bar { background:#7b967e; }
:root[data-theme="dark"] .dash-chart text { fill:#b5b5b5; }
:root[data-theme="dark"] input::placeholder,
:root[data-theme="dark"] textarea::placeholder { color:#a8a8a8; opacity:1; }