:root {
  /* Every colour is a variable from /palette.css, which mirrors the app's
     colors.scss and app_backgrounds.scss. As in the app, the background is
     the mist preset (the default). */
  --app-background: var(--app-background-mist);

  /* Translucent grain painted over a background colour. */
  --texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' seed='3' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' result='s' values='0 0 0 0 .29 0 0 0 0 .23 0 0 0 0 .15 -.6 0 0 0 .3'/%3E%3CfeColorMatrix in='n' result='h' values='0 0 0 0 1 0 0 0 0 .98 0 0 0 0 .94 .6 0 0 0 -.3'/%3E%3CfeMerge%3E%3CfeMergeNode in='s'/%3E%3CfeMergeNode in='h'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 240px 240px;

  --neutral-50: var(--palette-neutral-50);
  --neutral-100: var(--palette-neutral-100);
  --neutral-200: var(--palette-neutral-200);
  --neutral-300: var(--palette-neutral-300);
  --neutral-400: var(--palette-neutral-400);
  --neutral-500: var(--palette-neutral-500);
  --neutral-600: var(--palette-neutral-600);
  --neutral-700: var(--palette-neutral-700);
  --line: var(--neutral-200);
  --line-dark: var(--neutral-300);
  --muted: var(--neutral-700);
  --white: var(--palette-white);
  --black: var(--palette-black);
  --ink: var(--palette-slate-900);
  --green: var(--palette-green-600);
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}