:root { color-scheme: light; }

.appearance-card label { max-width: 240px; }
.appearance-card > .muted { margin-bottom: 0; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #101916;
  --surface: #192520;
  --ink: #e6eee7;
  --muted: #aabbb0;
  --line: #384b40;
  --green: #a9d3ae;
  --lime: #c5de9b;
  --orange: #ecab75;
  --control: #121d18;
  --raised: #24352b;
  --warm-surface: #3a2a20;
  --warm-text: #ffc695;
  --alert-surface: #39251f;
  --alert-border: #6b4639;
  --alert-text: #ffb39b;
  --recording: #789d75;
  --cached: #74bcd0;
  --playhead: #a4d5b1;
  --on-accent: #11241a;
}

html[data-theme="dark"] :is(.sidebar, .topbar, .auth-screen, .mobile-nav) {
  background: var(--paper);
}

html[data-theme="dark"] :is(.timeline-panel, .activity-panel, .activity-full, .settings-card, .activity-review-card, .replay-player) {
  background: var(--surface);
}

html[data-theme="dark"] :is(input, select, .auth-form > label input, .timeline-tools input) {
  background: var(--control);
  border-color: var(--line);
}

html[data-theme="dark"] :is(input, select):focus { border-color: var(--green); }
html[data-theme="dark"] :is(input, textarea)::placeholder { color: var(--muted); opacity: .8; }
html[data-theme="dark"] :is(.button, summary):focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

html[data-theme="dark"] .primary { background: var(--green); color: var(--on-accent); }
html[data-theme="dark"] .primary:hover { background: #c1e3c1; }
html[data-theme="dark"] .secondary { background: var(--surface); color: var(--ink); }
html[data-theme="dark"] .secondary:hover { background: var(--raised); }

html[data-theme="dark"] :is(.nav-item.active, .home-symbol, .home-pill, .avatar, .nav-item i, .date-picker, .count-pill,
  .camera-section h2 > span, .events-empty .empty-circle, code) {
  background: var(--raised);
  color: var(--green);
}

html[data-theme="dark"] :is(.page-heading h1, .auth-form h2) { color: var(--ink); }
html[data-theme="dark"] :is(.page-heading h1 span, .brand-dot, .text-button, .success) { color: var(--green); }
html[data-theme="dark"] :is(.eyebrow, .nav-label, .nav-item, .logout, .breadcrumb, .breadcrumb span, .topbar-right,
  .section-heading > span, .camera-placeholder, .legend, .timeline-labels, .timeline-bottom, .timeline-note,
  .timeline-range-tools .icon-button, .timeline-subheading select, .activity-controls, .activity-header select,
  .events-empty p, .event-kind, .event-time, .event-time small, .event-chevron, .activity-footer,
  .event-limit-note, .page-footer, .page-footer > span:first-child, .storage-card p, .storage-card small,
  .auth-form > p, .clip-help, .mobile-nav button) {
  color: var(--muted);
}

html[data-theme="dark"] :is(.nav-item.active, .mobile-nav button.active, .event-row:hover .event-name,
  .diagnostic-row .check, .storage-icon) {
  color: var(--green);
}

html[data-theme="dark"] .monitor-actions #refresh span { color: var(--muted); }
html[data-theme="dark"] .timeline-heading-left #clip-toggle { color: var(--green); }

html[data-theme="dark"] :is(.notice, .storage-card, .clip-result) {
  background: var(--raised);
  border-color: var(--line);
  color: var(--ink);
}

html[data-theme="dark"] :is(.error, .auth-form .error, .account-status.error, .camera-layout-status.error) {
  background: var(--alert-surface);
  border-color: var(--alert-border);
  color: var(--alert-text);
}

html[data-theme="dark"] :is(.recording-error, .diagnostic-row.failed .check) { color: var(--alert-text); }
html[data-theme="dark"] :is(.activity-header select, .camera-placeholder, .scrub-thumbnail) { border-color: var(--line); }
html[data-theme="dark"] :is(.event-icon, .camera-preview) { background: var(--raised); color: var(--green); }

html[data-theme="dark"] :is(.timeline-focus, .motion-step, .grid-motion) {
  background: var(--warm-surface);
  color: var(--warm-text);
}

html[data-theme="dark"] .grid-motion { border: 1px solid #77543a; }
html[data-theme="dark"] .motion-icon { color: var(--orange); }
html[data-theme="dark"] .grid-tile { background: #1c3328; }
html[data-theme="dark"] .viewer { background: #162c24; border-color: #294135; }
html[data-theme="dark"] .viewer-footer select { background: transparent; color: #bdd0c1; }
html[data-theme="dark"] .viewer-footer select option { background: var(--surface); color: var(--ink); }

html[data-theme="dark"] .timeline {
  background: repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px calc(100% / 24));
}

html[data-theme="dark"] .timeline-track { background: var(--raised); }
html[data-theme="dark"] :is(.recording-key, .timeline .recording-block) { background: var(--recording); }
html[data-theme="dark"] :is(.motion-key, .timeline .event-marker) { background: var(--orange); }
html[data-theme="dark"] .timeline .event-marker { border-color: #a86a40; }
html[data-theme="dark"] .timeline .event-marker:hover { background: #ffd1a9; }
html[data-theme="dark"] .cached-block { background: var(--cached); }
html[data-theme="dark"] .cache-status { color: var(--cached); }

html[data-theme="dark"] .timeline .playhead,
html[data-theme="dark"] .timeline .playhead::before,
html[data-theme="dark"] .timeline .playhead span {
  background: var(--playhead);
  color: var(--on-accent);
}

html[data-theme="dark"] .timeline .playhead::before { border-color: var(--surface); }
html[data-theme="dark"] .timeline .playhead.is-live,
html[data-theme="dark"] .timeline .playhead.is-live::before { background: var(--lime); }
html[data-theme="dark"] .timeline.is-scrubbing .playhead::before,
html[data-theme="dark"] .timeline.is-scrubbing .playhead span { background: var(--orange); }
html[data-theme="dark"] .clip-time-row .button.selecting { background: var(--raised); border-color: var(--green); }
html[data-theme="dark"] .clip-result progress { accent-color: var(--green); }
html[data-theme="dark"] .clip-selection { border-color: var(--cached); }

html[data-theme="dark"] .motion-heatmap {
  --heat-empty: #202f27;
  --heat-one: #324b37;
  --heat-two: #496d49;
  --heat-three: #90ba7a;
  --heat-four: #bce197;
  --heat-text: #f1f7ed;
  --heat-strong-text: #142b1c;
}