:root {
  color-scheme: light dark;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Iowan Old Style", "Apple Garamond", Baskerville, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --content-width: 47.5rem;
  --landing-width: 67.5rem;
  --radius: 0.35rem;
  --transition: 150ms ease;

  /* Light theme: warm paper, warm ink. */
  --color-page: #fdfcf9;
  --color-surface: #f7f6f2;
  --color-input: #fff;
  --color-hover: #efede7;
  --color-selection: #ded9ce;

  --color-ink: #24231f;
  --color-muted: #6d6a62;
  --color-faint: #929087;

  --color-border: #ddd9d0;
  --color-border-strong: #b9b4aa;

  --color-primary: #24231f;
  --color-primary-hover: #000;
  --color-on-primary: #fff;

  --color-danger: #9b3e3e;
  --color-danger-surface: #fbf3f1;
  --color-danger-border: #d8b2ad;
  --color-on-danger: #fff;
  --color-success: #315f43;

  --color-focus: #756f63;
  --color-focus-ring: rgba(36, 35, 31, 0.1);
  --color-shadow: rgba(36, 35, 31, 0.12);

  /* The mark and the hero are dark line art on transparency, so dark mode flips them. */
  --ink-art-filter: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-page: #171612;
    --color-surface: #1e1d18;
    --color-input: #100f0c;
    --color-hover: #26241d;
    --color-selection: #3d3a30;

    --color-ink: #e8e5dc;
    --color-muted: #a29d92;
    --color-faint: #878379;

    --color-border: #302e27;
    --color-border-strong: #4b483f;

    --color-primary: #e8e5dc;
    --color-primary-hover: #fff;
    --color-on-primary: #171612;

    --color-danger: #e08b84;
    --color-danger-surface: #2a1c1a;
    --color-danger-border: #6b3a36;
    --color-on-danger: #171612;
    --color-success: #7fb894;

    --color-focus: #a29d92;
    --color-focus-ring: rgba(232, 229, 220, 0.16);
    --color-shadow: rgba(0, 0, 0, 0.6);

    --ink-art-filter: invert(1);
  }
}