/* generated from DESIGN.md by sw.py tokens; edit DESIGN.md, not this file */
:root {
  --font-display: "Newsreader Variable", Georgia, "Times New Roman", serif;
  --font-body: "Atkinson Hyperlegible Next Variable", "Segoe UI", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono Variable", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --step--1: clamp(0.94rem, 0.91rem + 0.15vw, 1.03rem);
  --step-0: clamp(1.13rem, 1.08rem + 0.22vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.26rem + 0.45vw, 1.63rem);
  --step-2: clamp(1.7rem, 1.52rem + 0.9vw, 2.25rem);
  --step-3: clamp(2.2rem, 1.85rem + 1.75vw, 3.25rem);
  --step-4: clamp(2.6rem, 1.9rem + 3.5vw, 4.75rem);

  --color-paper: #efe6f7;
  --color-ink: #1c1830;
  --color-muted: #574f6e;
  --color-link: #a3155f;
  --color-brand: #d6338a;
  --color-on-brand: #140f22;
  --color-accent: #0a6f78;
  --color-surface: #e2d6f0;
  --color-rule: #d3c4e8;
  --color-heading: #2e1760;
  --color-meta: #0a6f78;
  --color-panel: #fbf8fe;
  --panel-pad: 1.5rem;
  --color-head-bg: #16122a;
  --color-head-ink: #f3edf8;
  --color-head-muted: #b9b0d2;
  --color-head-rule: #3a3158;
  --color-head-link: #ff7ac1;
  --color-head-focus: #3fe0d8;

  --radius: 0;
  --border: 1px solid var(--color-rule);
  --measure: 68ch;
  --wide: 72rem;
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --dur: 150ms;
  color-scheme: light dark;
}

:root[data-theme="dark"] {
  --color-paper: #100d1c;
  --color-ink: #ece6f7;
  --color-muted: #a9a2c0;
  --color-link: #ff7ac1;
  --color-brand: #ff4fa3;
  --color-accent: #3fe0d8;
  --color-surface: #1b1730;
  --color-rule: #2e2847;
  --color-heading: #ece6f7;
  --color-meta: #a9a2c0;
  --color-panel: #100d1c;
  --panel-pad: 0;
  --color-head-bg: #100d1c;
  --color-head-ink: #ece6f7;
  --color-head-muted: #a9a2c0;
  --color-head-rule: #2e2847;
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-paper: #100d1c;
    --color-ink: #ece6f7;
    --color-muted: #a9a2c0;
    --color-link: #ff7ac1;
    --color-brand: #ff4fa3;
    --color-accent: #3fe0d8;
    --color-surface: #1b1730;
    --color-rule: #2e2847;
    --color-heading: #ece6f7;
    --color-meta: #a9a2c0;
    --color-panel: #100d1c;
    --panel-pad: 0;
    --color-head-bg: #100d1c;
    --color-head-ink: #ece6f7;
    --color-head-muted: #a9a2c0;
    --color-head-rule: #2e2847;
    color-scheme: dark;
  }
}