/* Shared visual primitives. Page styles only choose their intended surface variant. */
:root {
  --font-body: "Manrope", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-display: "Big Shoulders Display", Impact, sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --page-max-width: 1480px;
  --page-gutter: clamp(18px, 3vw, 42px);
  --color-cream: #f1e7d8;
  --color-ink: #111111;
  --color-night: #090909;
  --surface-neutral-light: #efe2cf;
  --surface-neutral-muted-light: #e4d5c0;
  --surface-warm-light: #eadbc4;
  --surface-profile-light: #e9dac4;
  --surface-social-light: #e8dac5;
  --surface-neutral-dark: #121212;
  --surface-neutral-muted-dark: #181818;
  --surface-warm-dark: #171513;
  --foreground: var(--color-ink);
  --background: var(--color-cream);
  --muted-65: rgba(17, 17, 17, 0.65);
  --muted-66: rgba(17, 17, 17, 0.66);
  --muted-68: rgba(17, 17, 17, 0.68);
  --muted-70: rgba(17, 17, 17, 0.7);
  --muted-65-to-67: rgba(17, 17, 17, 0.65);
  --muted-68-to-70: rgba(17, 17, 17, 0.68);
  --muted-70-to-72: rgba(17, 17, 17, 0.7);
  --line-22: rgba(17, 17, 17, 0.22);
  --line-23: rgba(17, 17, 17, 0.23);
  --line-24: rgba(17, 17, 17, 0.24);
  --line-25: rgba(17, 17, 17, 0.25);
  --line-22-to-24: rgba(17, 17, 17, 0.22);
  --line-25-to-23: rgba(17, 17, 17, 0.25);
}

html {
  background: var(--background);
  color-scheme: only light;
}

/* One browser baseline for every route. Page styles own visual treatment only. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background: var(--background);
  color: var(--foreground);
  margin: 0;
}

[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  cursor: pointer;
}

html[data-theme="dark"] {
  color-scheme: only dark;
  --foreground: var(--color-cream);
  --background: var(--color-night);
  --muted-65: rgba(241, 231, 216, 0.68);
  --muted-66: rgba(241, 231, 216, 0.68);
  --muted-68: rgba(241, 231, 216, 0.68);
  --muted-70: rgba(241, 231, 216, 0.7);
  --muted-65-to-67: rgba(241, 231, 216, 0.67);
  --muted-68-to-70: rgba(241, 231, 216, 0.7);
  --muted-70-to-72: rgba(241, 231, 216, 0.72);
  --line-22: rgba(241, 231, 216, 0.22);
  --line-23: rgba(241, 231, 216, 0.23);
  --line-24: rgba(241, 231, 216, 0.24);
  --line-25: rgba(241, 231, 216, 0.24);
  --line-22-to-24: rgba(241, 231, 216, 0.24);
  --line-25-to-23: rgba(241, 231, 216, 0.23);
}

/* Preserve the guide's intentional palettes when Chromium enables forced colors. */
@media (forced-colors: active) {
  *,
  *::before,
  *::after {
    forced-color-adjust: none;
  }
}