:root {
  color-scheme:light;
  --blue:#0866ff;
  --text:#090b0f;
  --muted:#68717c;
  --background:#ffffff;
  --surface:#ffffff;
  --sidebar:#f4f5f7;
  --toolbar:#f1f2f4;
  --selection:#e5eefa;
  --bubble:#f0f1f3;
  --border:#d6d8dd;
}

:root[data-theme="dark"] {
  color-scheme:dark;
  --text:#f4f4f5;
  --muted:#a1a8b4;
  --background:#101114;
  --surface:#191b20;
  --sidebar:#15171b;
  --toolbar:#202329;
  --selection:#203451;
  --bubble:#292d35;
  --border:#363b45;
}

.theme-toggle {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  width:40px;
  height:40px;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
}
.theme-toggle:hover {
  color:var(--text);
  background:var(--bubble);
}
.theme-toggle:focus-visible {
  outline:2px solid var(--blue);
  outline-offset:3px;
}
.theme-toggle [data-icon] { display:none; }
.theme-toggle[data-preference="system"] [data-icon="system"],
.theme-toggle[data-preference="light"] [data-icon="light"],
.theme-toggle[data-preference="dark"] [data-icon="dark"] { display:initial; }
.theme-footer {
  display:flex;
  justify-content:flex-end;
  padding-top:12px;
}