:root {
  color-scheme: light dark;
  --paper: #fbf8f3;
  --card: #ffffff;
  --ink: #16130f;
  --ink-soft: #5f5a52;
  --ink-muted: #736d64;
  --line: #ece6dc;
  --record: #ff3b30;
  --record-deep: #c4231a;
  --record-text: #c4231a;
  --accent: #0f6e56;
  --accent-soft: #e1f5ee;
  --warn: #a84c0d;
  --warn-soft: #fdf0e3;
  --mark: #ffe45c;
  --mark-ink: #16130f;
  --solid: #111111;
  --solid-hover: #2e2a24;
  --on-solid: #ffffff;
  --on-solid-soft: #cfc8bd;
  --on-solid-line: rgba(255, 255, 255, 0.28);
  --bezel: #16130f;
  --on-media: #ffffff;
  --scrim: rgba(0, 0, 0, 0.55);
  --scrim-soft: rgba(0, 0, 0, 0.45);
  --shadow: rgba(22, 19, 15, 0.45);
  --focus: #c4231a;
  --sky: #e6eefb;
  --sky-ink: #2456b5;
  --sand: #fbf1dc;
  --sand-ink: #8a5a00;
  --mint: #e1f5ee;
  --rose: #fde8e7;
  --hand: "Caveat", "Bradley Hand", cursive;
  --sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif;
  --serif: "Source Serif 4", Georgia, serif;
  --gutter: clamp(16px, 5vw, 64px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121110;
    --card: #1c1a17;
    --ink: #f2eee7;
    --ink-soft: #b8b2a8;
    --ink-muted: #948e85;
    --line: #2e2b27;
    --record: #ff453a;
    --record-deep: #c4231a;
    --record-text: #ff7a70;
    --accent: #4fc3a1;
    --accent-soft: #163a30;
    --warn: #e8925a;
    --warn-soft: #3a2615;
    --mark: #6b5a10;
    --mark-ink: #f2eee7;
    --solid: #f2eee7;
    --solid-hover: #ffffff;
    --on-solid: #121110;
    --on-solid-soft: #5f5a52;
    --on-solid-line: rgba(22, 19, 15, 0.28);
    --bezel: #2e2a24;
    --shadow: rgba(0, 0, 0, 0.7);
    --focus: #ff6b61;
    --sky: #17253d;
    --sky-ink: #8fb4f5;
    --sand: #33280f;
    --sand-ink: #f0c56a;
    --mint: #13372d;
    --rose: #3d1a18;
  }
}