:root {
  --layout-max-width: 96rem;
  --layout-gutter: 1rem;
  --bg: #faf9f4;
  --bg-raised: #ffffff;
  --bg-sunken: #f0eee6;
  --ink: #141413;
  --ink-muted: #73726c;
  --ink-faint: #a4a29a;
  --border: rgba(31, 30, 29, 0.12);
  --border-strong: rgba(31, 30, 29, 0.22);
  --clay: #d97757;
  --clay-deep: #c6613f;
  --add-bg: #e6f5ea;
  --add-ink: #175c30;
  --add-bar: #4ea872;
  --del-bg: #fae9e9;
  --del-ink: #7a1f1f;
  --del-bar: #c27474;
  --replace-old-bg: #fdf3e9;
  --replace-new-bg: #eef5ff;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Courier New", monospace;
  --rad: 8px;
  --shadow: 0 1px 2px rgba(31, 30, 29, 0.04), 0 4px 12px -4px rgba(31, 30, 29, 0.08);
}

@media (min-width: 40rem) {
  :root {
    --layout-gutter: 1.25rem;
  }
}

@media (min-width: 64rem) {
  :root {
    --layout-gutter: 1.5rem;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1f1e1d;
    --bg-raised: #262624;
    --bg-sunken: #16151480;
    --ink: #f0eee6;
    --ink-muted: #91908a;
    --ink-faint: #6a6a63;
    --border: rgba(240, 238, 230, 0.10);
    --border-strong: rgba(240, 238, 230, 0.20);
    --add-bg: #17331f;
    --add-ink: #7bd39a;
    --add-bar: #3d7852;
    --del-bg: #3b1a1a;
    --del-ink: #e49a9a;
    --del-bar: #8a4040;
    --replace-old-bg: #33240f;
    --replace-new-bg: #152233;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 16px -4px rgba(0, 0, 0, 0.4);
  }
}