/* Omni: base stylesheet. Tokens first; typography is decided later. */

:root {
  color-scheme: light dark;

  --font-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --measure: 64ch;
  --space: 1rem;

  --ink: light-dark(#1a1a1a, #e8e8e8);
  --ink-muted: light-dark(#6b6b6b, #9a9a9a);
  --paper: light-dark(#fbfbfa, #151515);
  --rule: light-dark(#e2e2e0, #2c2c2c);
  --accent: light-dark(#1d4ed8, #93b4ff);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding-inline: var(--space);
  padding-block: 0 calc(var(--space) * 3);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space);
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: var(--space);
  border-block-end: 1px solid var(--rule);
}

.brand {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: inherit;
}

main {
  max-width: var(--measure);
  margin-inline: auto;
  padding-block: calc(var(--space) * 2);
}

h1, h2 {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin-block: 0 var(--space);
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.125rem; margin-block-start: calc(var(--space) * 2); }

p, ul { margin-block: 0 var(--space); }

small, .muted { color: var(--ink-muted); }

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

ul.plain {
  list-style: none;
  padding: 0;
}

ul.plain li {
  padding-block: calc(var(--space) / 2);
  border-block-end: 1px solid var(--rule);
}

ul.plain small {
  display: block;
}

form {
  display: grid;
  gap: var(--space);
  margin-block: var(--space);
}

label {
  display: grid;
  gap: 0.25rem;
}

input[type="text"] {
  font: inherit;
  padding: 0.5rem 0.625rem;
  color: inherit;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 4px;
}

button {
  font: inherit;
  font-weight: 500;
  padding: 0.5rem 0.875rem;
  color: var(--paper);
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: 4px;
  cursor: pointer;
  justify-self: start;
}

button.quiet {
  color: var(--ink-muted);
  background: transparent;
  border-color: transparent;
  padding-inline: 0;
}

button:disabled {
  opacity: 0.5;
  cursor: default;
}

.status:empty {
  display: none;
}