@font-face {
  font-family: "iA Writer Quattro";
  src: url("/fonts/iAWriterQuattroS-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Quattro";
  src: url("/fonts/iAWriterQuattroS-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Quattro";
  src: url("/fonts/iAWriterQuattroS-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Quattro";
  src: url("/fonts/iAWriterQuattroS-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fonts/iAWriterMonoS-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fonts/iAWriterMonoS-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fonts/iAWriterMonoS-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "iA Writer Mono";
  src: url("/fonts/iAWriterMonoS-BoldItalic.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --bg-h: 40deg;
  --bg-s: 18%;
  --bg-l: 99%;

  --color-bg: hsl(var(--bg-h) var(--bg-s) var(--bg-l));
  --color-bg-secondary: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 3%));
  --color-border: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 8%));
  --color-selection-bg: hsl(var(--bg-h) var(--bg-s) calc(var(--bg-l) - 14%));
  --color-text: hsl(
    var(--bg-h) var(--bg-s) clamp(8%, calc(100% - var(--bg-l)), 92%)
  );
  --color-text-muted: hsl(
    var(--bg-h) 12% clamp(32%, calc(82% - var(--bg-l)), 46%)
  );

  --accent-h: 211deg;
  --accent-s: 72%;
  --accent-l: 45%;
  --color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  --color-accent-soft: color-mix(
    in oklab,
    var(--color-accent) 10%,
    var(--color-bg)
  );

  --font-body: "iA Writer Quattro", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "iA Writer Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-base: 1.0625rem;
  --leading: 1.65;
  --measure: 72ch;
  --space: calc(var(--leading) * 1rem);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg-l: 8.2%;
    --color-bg: #151515;
    --color-bg-secondary: #1b1b1b;
    --color-border: #2e2e2e;
    --color-selection-bg: #3a3a3a;
    --color-text: #e6e6e6;
    --color-text-muted: #b3b3b3;
    --accent-h: 190deg;
    --accent-s: 50%;
    --accent-l: 66%;
    --color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-l: 8.2%;
  --color-bg: #151515;
  --color-bg-secondary: #1b1b1b;
  --color-border: #2e2e2e;
  --color-selection-bg: #3a3a3a;
  --color-text: #e6e6e6;
  --color-text-muted: #b3b3b3;
  --accent-h: 190deg;
  --accent-s: 50%;
  --accent-l: 66%;
  --color-accent: hsl(var(--accent-h) var(--accent-s) var(--accent-l));
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg-l: 99%;
}