:root {
  --bg: #f7f5f0;
  --card: #fffefa;
  --ink: #292b30;
  --muted: #686660;
  --line: #e2ded5;
  --accent: #f4b544;
  --soft: #eeebe4;
  --red: #a73c31;
}
* {
  box-sizing: border-box;
}
html[data-theme="dark"] {
  --bg: #1d2025;
  --card: #26292e;
  --ink: #f0ece4;
  --muted: #b9b6b0;
  --line: #424247;
  --soft: #303237;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px;
  line-height: 1.6;
}
button,
input,
select,
textarea {
  font: inherit;
}
button,
a,
input,
select,
textarea {
  outline-offset: 4px;
}
button,
a {
  touch-action: manipulation;
}
button {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--ink);
  border-radius: 9px;
  padding: 10px 16px;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover {
  border-color: var(--selected-border);
  transform: translateY(-1px);
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}
a {
  color: inherit;
  text-decoration: none;
}
input,
select,
textarea {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 11px;
  max-width: 100%;
}
input[type="checkbox"] {
  accent-color: var(--focus);
  width: 18px;
  height: 18px;
}
/* Warm neutrals and orange-yellow accents, shared across both themes. */
:root {
  color-scheme: light;
  --selected: #fff0d2; --selected-border: #c78520; --selected-ink: #694313;
  --quiet-bg: #f4ead8; --quiet-ink: #685536;
  --notice-bg: #fff0d1; --notice-ink: #74521d;
  --error-bg: #f7e4df; --error-ink: #913f35;
  --success-bg: #e5ebe4; --success-ink: #435c49; --focus: #a96513;
}