:root {
  --ink-900: #16131a;
  --ink-700: #2d2834;
  --ink-500: #6b6474;
  --paper-50: #fbf8f3;
  --paper-100: #f3eee5;
  --paper-200: #e4ddd0;
  --paper-400: #a79f92;
  --saffron-400: #f2b84b;
  --saffron-500: #e3a12c;
  --teal-300: #6fcfc2;
  --teal-600: #1f8a7e;
  --rose-300: #f28db2;
  --rose-600: #c23a6c;
  --green-300: #8fd49a;
  --green-600: #1f8a46;

  --bg: var(--paper-50);
  --surface: var(--paper-100);
  --border: var(--paper-200);
  --text: var(--ink-900);
  --text-muted: var(--ink-500);
  --accent: var(--saffron-500);
  --author-brett: var(--teal-600);
  --author-melissa: var(--rose-600);
  --author-victoria: var(--green-600);
  --author-other: var(--ink-500);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: var(--ink-900);
    --surface: var(--ink-700);
    --border: var(--ink-500);
    --text: var(--paper-50);
    --text-muted: var(--paper-400);
    --accent: var(--saffron-400);
    --author-brett: var(--teal-300);
    --author-melissa: var(--rose-300);
    --author-victoria: var(--green-300);
    --author-other: var(--paper-400);
  }
}