:root {
  --bg: #F6EEDC;
  --bg-alt: #ECDFC0;
  --surface: #FFFBF1;
  --ink: #2A2013;
  --ink-soft: #6B5A40;
  --gold: #A8781F;
  --gold-bright: #C99A3D;
  --teal: #0E6B64;
  --terracotta: #B4432C;
  --line: rgba(42, 32, 19, 0.16);
  --shadow: rgba(42, 32, 19, 0.22);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #181109;
    --bg-alt: #221909;
    --surface: #241B10;
    --ink: #F3E9D2;
    --ink-soft: #C9B591;
    --gold: #E0AC52;
    --gold-bright: #F2C877;
    --teal: #4CBBB0;
    --terracotta: #E58260;
    --line: rgba(243, 233, 210, 0.16);
    --shadow: rgba(0, 0, 0, 0.55);
    color-scheme: dark;
  }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
.font-display {
  font-family: "Fraunces", Georgia, serif;
}
::selection {
  background: var(--gold);
  color: var(--surface);
}
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.tab[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--gold);
  font-weight: 600;
}