:root {
  /* Paper — the daylight room */
  --paper-0: #F6F1E7;
  --paper-1: #F1EADC;
  --paper-2: #EAE1D0;
  --ink-0: #332C24;
  --ink-1: #8A8072;
  --ink-2: #A79C8B;
  --ink-3: #B9AE9B;
  --ink-4: #DCD1BE;

  /* Night — the recording booth */
  --night-0: #1A1917;
  --night-1: #1D1C19;
  --night-2: #262421;
  --night-3: #3B3833;
  --bone-0: #E9E4DA;
  --bone-1: #8C867B;
  --bone-2: #6B665D;
  --bone-3: #4E4B45;

  /* Signals — the only two colors in the system */
  --amber-day: #B0763F;
  --amber-night: #C9A227;
  --moss-day: #6E7F58;
  --moss-night: #7FA06B;

  /* Semantic aliases (light is the default theme) */
  --surface-page: var(--paper-0);
  --surface-margin: var(--paper-1);
  --surface-raised: var(--paper-2);
  --text-said: var(--ink-0);
  --text-trailed: var(--ink-1);
  --text-quiet: var(--ink-2);
  --text-faint: var(--ink-3);
  --rule: var(--ink-4);
  --accent-new: var(--amber-day);
  --accent-done: var(--moss-day);
  /* Softer than full ink — a filled control should not be the darkest thing on the page. */
  --control-fill: #5C5347;
  --control-ink: var(--paper-0);
  --control-border: #5C5347;
  --strike: var(--ink-3);
  --shadow-screen: 0 18px 44px -30px rgba(70, 52, 32, .55);
}

[data-theme="night"] {
  /* The night room reads in a grotesque; the parlour reads in Newsreader. */
  --font-display: var(--font-ui);
  --surface-page: var(--night-0);
  --surface-margin: var(--night-1);
  --surface-raised: var(--night-2);
  --text-said: var(--bone-0);
  --text-trailed: var(--bone-1);
  --text-quiet: var(--bone-2);
  --text-faint: var(--bone-3);
  --rule: var(--night-2);
  --accent-new: var(--amber-night);
  --accent-done: var(--moss-night);
  --control-fill: transparent;
  --control-ink: var(--bone-0);
  --control-border: var(--night-3);
  --strike: var(--bone-3);
  --shadow-screen: 0 18px 44px -30px rgba(0, 0, 0, .7);
}