:root {
  color-scheme: dark;

  --wn-night: #0a0e0c;
  --wn-night-soft: #111814;
  --wn-night-raised: #17201b;
  --wn-daylight: #f2efe6;
  --wn-daylight-soft: #dedfd4;
  --wn-ink: #111512;
  --wn-white: #fbf9f2;
  --wn-muted: #aeb6ae;
  --wn-muted-dark: #59625c;
  --wn-red: #dc1e35;
  --wn-red-deep: #b1172c;
  --wn-brick: #914936;
  --wn-brick-deep: #5c2e24;
  --wn-north-light: #b9cdd0;
  --wn-timber: #76503d;
  --wn-focus: #fff0b8;
  --wn-line: rgb(251 249 242 / 18%);
  --wn-line-dark: rgb(17 21 18 / 20%);

  --wn-font-sans:
    "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", sans-serif;
  --wn-weight-regular: 400;
  --wn-weight-medium: 540;
  --wn-weight-strong: 660;
  --wn-width-reading: 100%;
  --wn-width-display: 88%;

  --wn-page-inset: clamp(1rem, 4.2vw, 5.25rem);
  --wn-content-max: 96rem;
  --wn-reading-max: 44rem;
  --wn-header-min: clamp(4.75rem, 5.8vw, 6rem);
  --wn-space-1: 0.35rem;
  --wn-space-2: 0.65rem;
  --wn-space-3: 1rem;
  --wn-space-4: 1.5rem;
  --wn-space-5: 2.25rem;
  --wn-space-6: 3.5rem;
  --wn-space-7: 5.5rem;
  --wn-space-8: 8.5rem;

  --wn-radius-small: 0.2rem;
  --wn-radius-media: 0.45rem;
  --wn-ease-arrive: cubic-bezier(0.22, 1, 0.36, 1);
  --wn-ease-leave: cubic-bezier(0.55, 0, 1, 0.45);
  --wn-duration-fast: 160ms;
  --wn-duration-state: 480ms;
  --wn-duration-field: 900ms;

  /* Temporary route-style aliases. U8 removes these as route composition moves
     onto the authored tokens above. They are compatibility, not authority. */
  --mineral: var(--wn-night);
  --mineral-soft: var(--wn-night-soft);
  --mineral-raised: var(--wn-night-raised);
  --paper: var(--wn-daylight);
  --paper-soft: var(--wn-daylight-soft);
  --ink: var(--wn-ink);
  --white: var(--wn-white);
  --muted: var(--wn-muted);
  --muted-dark: var(--wn-muted-dark);
  --line: var(--wn-line);
  --line-dark: var(--wn-line-dark);
  --red: var(--wn-red);
  --red-deep: var(--wn-red-deep);
  --brick: var(--wn-brick);
  --moss: #40584d;
  --header-h: 0rem;
  --page-pad: var(--wn-page-inset);
  --content: var(--wn-content-max);
  --ease-host: var(--wn-ease-arrive);
}

@media (max-width: 54rem) {
  :root {
    --wn-space-6: 2.75rem;
    --wn-space-7: 3.75rem;
    --wn-space-8: 5rem;
  }
}