:root {
  --black: #131313;
  --grey: #5a5a5a;
  --white-soft: #e5e5e5;
  --white: #fff;
  --yellow: #ffd400;

  --card-face: #f4f8fd;
  --card-bar: #f0f0f0;

  /* #5a5a5a is the landing grey, but it is only legible on light surfaces.
     On the dark page background use --muted instead. */
  --muted: #a5a5a5;
  --muted-dim: #8a8a8a;

  --font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --container: 1600px;
  --gutter: 20px;

  --radius-card: 24px;
  --radius-pill: 999px;
  --radius-input: 12px;

  --section-pad: 100px;
  --section-pad-mobile: 60px;
  --header-gap: 100px;
  --header-gap-mobile: 48px;
}