:root {
  color-scheme: light;
  --paper: #e4e9ef;
  --paper-raised: #f3f6f9;
  --paper-inset: #d7dee6;
  --ink: #1c2430;
  --ink-muted: #5c6774;
  --ink-faint: #8a95a3;
  --rule: #b8c3cf;
  --rule-faint: #cfd7e0;
  --gutter: #d5dce4;
  --stripe-positionality: #2a6f7a;
  --stripe-sources: #3a5a96;
  --stripe-operations: #2d5c3c;
  --stripe-trail: #6e4a2c;
  --stripe-kitchen: #b56a12;
  --stripe-resist: #7a3a5c;
  --status-coded: #1e6b48;
  --status-progress: #8a5a24;
  --status-archived: #5c6774;
  --status-memo: #4a5f8a;
  --danger: #8b3a32;
  --live: #1a6b8a;
  --focus: #2a6f7a;
  --shadow: 0 1px 0 rgba(28, 36, 48, 0.06);
  --font-ui: "Public Sans", "Segoe UI", sans-serif;
  --font-display: "Literata", "Iowan Old Style", "Palatino Linotype", serif;
  --font-mono: "IBM Plex Mono", "ui-monospace", monospace;
  --topbar: 48px;
  --tabs: 34px;
  --statusbar: 28px;
  --sidebar: 268px;
  --line: 28px;
  --gutter-w: 3.1rem;
  --stripe-w: 7px;
}

[data-theme="night"] {
  color-scheme: dark;
  --paper: #1a222c;
  --paper-raised: #222c38;
  --paper-inset: #141b24;
  --ink: #e6ebf1;
  --ink-muted: #9aa6b4;
  --ink-faint: #6d7a88;
  --rule: #3a4654;
  --rule-faint: #2c3642;
  --gutter: #151c25;
  --shadow: 0 1px 0 rgba(0, 0, 0, 0.35);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  left: -999px;
  top: 0;
}

.skip:focus {
  left: 8px;
  top: 8px;
  z-index: 20;
  background: var(--paper-raised);
  padding: 0.4rem 0.7rem;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

a {
  color: var(--live);
}

[data-theme="night"] a {
  color: #7eb8c9;
}