:root {
  --color-text: black;
  --color-text-reversed: white;
  --color-text-muted: #757575;
  --color-bg: white;
  --color-bg-alt: white;
  --color-success: #00f58e;
  --color-text-success: #007844; /* TODO: revisit var names */
  --color-danger: #ff719c;
  --color-text-danger: #cd3160;
  --font-size-label: 0.8rem;
  --font-size-body: 1rem;
  --font-size-emphasis: 1.563rem;
  --font-weight-bold: 700;
  --font-weight-medium: 600;
  --border-radius-pill: 9999px;
  /* font stacks from https://qwtel.com/posts/software/the-monospaced-system-ui-css-font-stack */
  --font-sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
    "Helvetica Neue", Arial, sans-serif;
  --font-monospace: ui-monospace, Menlo, Monaco, "Cascadia Mono",
    "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace",
    "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
  --margin-horizontal: 3rem;
  --margin-vertical: 3rem;
  --shadow-color: rgba(0, 0, 0, 0.15);
  --shadow-offset: 0px 0.25rem;
}

html {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans-serif);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.menu-button {
  cursor: pointer;
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: var(--font-size-label);
  color: var(--color-text);
  white-space: nowrap;
  /* reset */
  background: none;
  border: none;
}

@media screen and (max-width: 600px) {
  :root {
    --margin-horizontal: 1.5rem;
  }
  .menu-button {
    flex-direction: column-reverse;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: white;
    --color-text-reversed: black;
    --color-text-muted: #bbb;
    --color-bg: #444;
    --color-bg-alt: #555;
    --color-success: #00f58e;
    --color-text-success: var(--color-success);
    --color-danger: #ff719c;
    --color-text-danger: var(--color-danger);
  }
}