:root {
  --page: #fafaf9;
  --surface: #ffffff;
  --soft: #fdf2f8;
  --ink: #1c1917;
  --body: #44403c;
  --muted: #57534e;
  --line: #e7e5e4;
  --accent: #be185d;
  --accent-hover: #9d174d;
  --accent-dark: #831843;
  --on-accent: #ffffff;
}

.page-bg { background-color: var(--page); }
.surface-bg { background-color: var(--surface); }
.soft-bg { background-color: var(--soft); }
.ink-text { color: var(--ink); }
.body-text { color: var(--body); }
.muted-text { color: var(--muted); }
.line-border { border-color: var(--line); }
.line-divide > li + li { border-top: 1px solid var(--line); }
.accent-text { color: var(--accent); }
.accent-hover:hover { color: var(--accent); }
.accent-bg { background-color: var(--accent); }
.accent-bg-hover:hover { background-color: var(--accent-hover); }
.accent-dark-bg { background-color: var(--accent-dark); }
.accent-dark-text { color: var(--accent-dark); }
.accent-dark-border { border-color: var(--accent-dark); }
.on-accent-text { color: var(--on-accent); }