:root,
body.theme-light {
  --page: #eef3f4;
  --surface: #ffffff;
  --surface-2: #f5f8f8;
  --surface-3: #e8eeee;
  --line: #d2dcdb;
  --line-strong: #aebfbd;
  --text: #14201f;
  --muted: #60716f;
  --accent: #147a7e;
  --accent-2: #7b5a20;
  --accent-3: #6f5cc4;
  --accent-soft: #dff1f1;
  --focus: #0d9488;
  --red: #bc2f2b;
  --red-soft: #ffe2df;
  --amber: #a05a00;
  --amber-soft: #fff0cf;
  --green: #087f5b;
  --green-soft: #d9f5e8;
  --blue-soft: #dfeeff;
  --violet-soft: #ebe7ff;
}

body.theme-dark {
  --page: #101312;
  --surface: #171c1b;
  --surface-2: #202725;
  --surface-3: #2a3431;
  --line: #33413e;
  --line-strong: #596a66;
  --text: #edf7f4;
  --muted: #9eb1ad;
  --accent: #55d7c6;
  --accent-2: #f3b45f;
  --accent-3: #a99cff;
  --accent-soft: #173733;
  --focus: #5eead4;
  --red: #ff8d82;
  --red-soft: #3b1f1d;
  --amber: #f5c15d;
  --amber-soft: #382b18;
  --green: #72e0ad;
  --green-soft: #17362b;
  --blue-soft: #1b2e38;
  --violet-soft: #28233f;
}

@media (prefers-contrast: more) {
  :root { --line: #64748b; --line-strong: #334155; }
  .badge, .btn, .field input, .field select, .field textarea { border-width: 2px; }
}