:root {
  color-scheme: dark;

  --bg: #0c0a12;
  --bg-raised: #120f1a;
  --surface: #16131f;
  --surface-2: #1e1a2a;
  --line: rgb(243 238 248 / 0.1);
  --line-strong: rgb(243 238 248 / 0.2);

  --text: #f3eef8;
  --muted: #a8a0bb;
  --faint: #857d99;

  /* genderfluid flag */
  --pink: #ff76a4;
  --white: #ffffff;
  --violet: #c011d7;
  --black: #000000;
  --blue: #2f3cbe;

  /* lighter versions that are readable on the dark background */
  --pink-text: #ff8db4;
  --violet-text: #da7ff2;
  --blue-text: #8f98ff;
  --error: #ff9aa9;

  --fluid: linear-gradient(110deg, var(--pink) 0%, var(--violet-text) 48%, var(--blue-text) 100%);

  --font-display: "Bricolage Grotesque Variable", "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--1: clamp(0.84rem, 0.82rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.1rem);
  --step-1: clamp(1.15rem, 1.07rem + 0.4vw, 1.4rem);
  --step-2: clamp(1.35rem, 1.2rem + 0.75vw, 1.85rem);
  --step-3: clamp(1.7rem, 1.4rem + 1.5vw, 2.6rem);
  --step-4: clamp(2.2rem, 1.6rem + 3vw, 4.25rem);
  --step-5: clamp(2.8rem, 1.7rem + 5.5vw, 6.5rem);

  --radius-s: 0.6rem;
  --radius: 1rem;
  --radius-l: 1.5rem;

  --gutter: clamp(1rem, 4vw, 2.5rem);
  --container: 78rem;
  --section: clamp(4.5rem, 3rem + 7vw, 9rem);
  --header-h: 4.25rem;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}