:root {
  --page: #f7f2e8;
  --surface: #fffdf8;
  --sand: #e9dfcf;
  --ink: #25211d;
  --muted: #6b6257;
  --line: #cbbfac;
  --terracotta: #a9482f;
  --ochre: #d7ae54;
  --shadow: #d8cebd;
}

[data-theme="dark"] {
  --page: #1d211d;
  --surface: #292e28;
  --sand: #363c33;
  --ink: #f5eee2;
  --muted: #c9c0b2;
  --line: #51574b;
  --terracotta: #e17a57;
  --ochre: #d8b35d;
  --shadow: #101310;
}

html, body, .site-header, .card, .theme-toggle, .field input, .field textarea, .field select {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}