@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/geist-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: dark;

  --color-paper: oklch(22.57% 0.0194 280.2);
  --color-paper-2: oklch(24.25% 0.0177 279.8);
  --color-paper-3: oklch(27.39% 0.0055 286);
  --color-ink: oklch(87.11% 0.0055 286.3);
  --color-ink-2: oklch(78.41% 0.007 286.2);
  --color-muted: oklch(66% 0.009 286);
  --color-rule: oklch(27.39% 0.0055 286);
  --color-rule-2: oklch(45% 0.009 286);
  --color-accent: oklch(78.59% 0.1674 70);
  --color-accent-soft: oklch(31% 0.075 70);
  --color-accent-ink: oklch(14.08% 0.0044 285.8);
  --color-badge-ink: var(--color-accent);
  --color-accent-text: var(--color-accent);
  --color-focus: oklch(84% 0.15 70);
  --color-secondary-hover: var(--color-rule-2);

  --font-display: "Geist Mono", ui-monospace, monospace;
  --font-body: "Geist Mono", ui-monospace, monospace;
  --font-outlier: "Geist Mono", ui-monospace, monospace;

  --text-xs: 0.875rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.25rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4.5rem;

  --content-width: 44rem;
  --page-gutter: 1rem;
  --reading-width: 65ch;
  --control-height: 2.75rem;

  --rule-hair: 1px;
  --rule-fine: 2px;
  --radius-small: 0.25rem;
  --radius-card: 0.5rem;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 180ms;
  --dur-long: 300ms;
}

:root[data-theme="light"] {
  color-scheme: light;

  --color-paper: oklch(97.5% 0.004 280);
  --color-paper-2: oklch(95% 0.006 280);
  --color-paper-3: oklch(92.5% 0.006 280);
  --color-ink: oklch(18.79% 0.0146 272.5);
  --color-ink-2: oklch(38% 0.012 280);
  --color-muted: oklch(47% 0.01 280);
  --color-rule: oklch(88% 0.006 280);
  --color-rule-2: oklch(58% 0.01 280);
  --color-accent: oklch(68% 0.17 70);
  --color-accent-soft: oklch(91% 0.065 70);
  --color-accent-ink: oklch(16% 0.008 280);
  --color-badge-ink: oklch(35% 0.12 70);
  /* Text-safe amber: 4.5:1+ on paper and paper-2. */
  --color-accent-text: oklch(50% 0.12 70);
  --color-focus: oklch(56% 0.18 70);
  --color-secondary-hover: oklch(86% 0.008 280);
}

@media (min-width: 40rem) {
  :root {
    --page-gutter: 2rem;
  }
}