:root {
  --canvas: oklch(.975 0 0);
  --primary-hover: oklch(.29 0 0);
  --avatar: oklch(.91 0 0);
  --warning: #95520b;
  --error-bg: #fff7f5;
  --error-line: #ecc8c3;
  --error-ink: #83392e;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #181818;
  --canvas: #121212;
  --surface: #242424;
  --surface-hover: #303030;
  --ink: #e7e7e7;
  --muted: #ababab;
  --line: #3c3c3c;
  --strong-line: #808080;
  --accent: #e7e7e7;
  --danger: #f09e96;
  --success: #80c49d;
  --primary-hover: #cfcfcf;
  --avatar: #363636;
  --warning: #e4b775;
  --error-bg: #352420;
  --error-line: #86564e;
  --error-ink: #f3b1a6;
}

/* Safe system fallback if the tiny startup script cannot load. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #181818; --canvas: #121212; --surface: #242424; --surface-hover: #303030;
    --ink: #e7e7e7; --muted: #ababab; --line: #3c3c3c; --strong-line: #808080;
    --accent: #e7e7e7; --danger: #f09e96; --success: #80c49d;
    --primary-hover: #cfcfcf; --avatar: #363636; --warning: #e4b775;
    --error-bg: #352420; --error-line: #86564e; --error-ink: #f3b1a6;
  }
}

html { background: var(--bg); }
.appearance-settings { border: 0; padding: 0 0 25px; margin: 0; }
.appearance-settings legend { font-size: 16px; font-weight: 650; margin-bottom: 12px; padding: 0; }
.appearance-settings p { color: var(--muted); font-size: 14px; line-height: 1.8; margin: 10px 0 0; }