:root {
  --paper: #f4f6f1;
  --white: #ffffff;
  --ink: #182b22;
  --muted: #607267;
  --green: #245d42;
  --soft: #e8eee5;
  --line: #dce5da;
  --accent: #d4f58c;
  --accent-ink: #253b15;
  --danger: #9d382b;
  --danger-soft: #fbebe4;
  --caution: #886027;
  --caution-soft: #f6eedb;
  --shadow: 0 16px 48px #223b2410;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --serif: Fraunces, Georgia, serif;
  color-scheme: light;
}
:root[data-theme='dark'] {
  --paper: #101814;
  --white: #19231d;
  --ink: #eaf0e5;
  --muted: #a5b4a6;
  --green: #acd997;
  --soft: #253229;
  --line: #344438;
  --accent: #d4f58c;
  --accent-ink: #253b15;
  --danger: #ffb29a;
  --danger-soft: #3c2520;
  --caution: #ecc58a;
  --caution-soft: #352e21;
  --shadow: 0 16px 48px #00000026;
  color-scheme: dark;
}
.theme-control { display: flex; align-items: center; gap: 7px; background: var(--white); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 0 9px; min-height: 40px; }
.theme-control svg { width: 17px; height: 17px; flex: none; }
.theme-control select { width: 76px; min-height: 38px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: 12px var(--sans); cursor: pointer; }
.theme-control option { background: var(--white); color: var(--ink); }
.theme-control:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.theme-control select:focus-visible { outline: 0; }