:root {
  color-scheme: light;
  --ink: #2E3D31;
  --cream: #F9F5EE;
  --greige: #EDE6DC;
  --sage: #BAC1B3;
  --warm-grey: #E7E5E3;
  --text: #1F2830;
  --raised: #fff;
  --danger: #8B302B;
  --button-text: #fff;
  --device-case: #2E3D31;
  --split-divider: rgb(249 245 238 / 35%);
  --menu-shadow: rgb(46 61 49 / 12%);
  --device-shadow: rgb(46 61 49 / 10%);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #d3b271;
  --cream: #11100d;
  --greige: #2a2720;
  --sage: #4e432c;
  --warm-grey: #2a2720;
  --text: #efe6d0;
  --raised: #2a2720;
  --danger: #df8a83;
  --button-text: #11100d;
  --device-case: #2a2720;
  --split-divider: rgb(17 16 13 / 35%);
  --menu-shadow: rgb(0 0 0 / 30%);
  --device-shadow: rgb(0 0 0 / 30%);
}

.theme-image { display: block; }
.brand .theme-image { display: inline-flex; }
.theme-control {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0.5rem 0.75rem;
  font-size: 0.9rem;
  font-weight: normal;
  padding: 0.15rem;
  border: 1px solid var(--ink);
  border-radius: 2rem;
}
.theme-control a {
  padding: 0.3rem 0.65rem;
  border-radius: 2rem;
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}
.theme-control a[aria-current="page"] {
  background: var(--ink);
  color: var(--cream);
}
.theme-control a:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}