:root {
  color-scheme: dark;
  --ink: light-dark(#171717, #f5f5f5);
  --paper: light-dark(#fff, #242424);
  --page: light-dark(#f5f5f5, #151515);
  --accent: var(--ink);
  --on-accent: light-dark(#fff, #171717);
  --focus-ring: light-dark(#242424, #ededed);
  --gray-00: light-dark(#000, #fff);
  --gray-10: var(--ink);
  --gray-20: light-dark(#303030, #dedede);
  --gray-30: light-dark(#484848, #c9c9c9);
  --gray-40: light-dark(#585858, #b8b8b8);
  --gray-50: light-dark(#666, #acacac);
  --gray-60: light-dark(#727272, #a0a0a0);
  --gray-70: light-dark(#929292, #858585);
  --gray-80: light-dark(#b9b9b9, #606060);
  --gray-85: light-dark(#ccc, #505050);
  --gray-90: light-dark(#ddd, #414141);
  --gray-93: light-dark(#e9e9e9, #363636);
  --gray-96: light-dark(#f2f2f2, #2b2b2b);
  --gray-98: light-dark(#f8f8f8, #1e1e1e);
}
:root[data-theme="light"] { color-scheme: light; }
a { color: inherit; }

.theme-toggle {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  padding: 0;
  border: 1px solid var(--gray-90);
  border-radius: 9px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.theme-toggle:hover { background: var(--gray-93); }
.theme-toggle svg { width: 18px; height: 18px; pointer-events: none; }
.theme-toggle .theme-sun, [data-theme="dark"] .theme-toggle .theme-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-sun { display: block; }
.theme-toggle:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }