:root {
  /* As in the app: --app-background is a preset from
     web-frontend/modules/core/assets/scss/app_backgrounds.scss (mist, the
     default), and everything else uses the fixed neutrals from colors.scss. */
  --app-background: oklch(97.2% 0.006 248);

  /* 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;

  /* $palette-neutral-* from web-frontend/modules/core/assets/scss/colors.scss. */
  --neutral-50: #fafafa;
  --neutral-100: #f0f1f2;
  --neutral-200: #e7e8ea;
  --neutral-300: #dddee1;
  --neutral-400: #b7b9be;
  --neutral-500: #8c8f97;
  --neutral-600: #6b6e76;
  --neutral-700: #505258;
  --line: var(--neutral-200);
  --line-dark: var(--neutral-300);
  --muted: var(--neutral-700);
  --white: #ffffff;
  --ink: #131419;
  --green: #1f6f50;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
}