:root {
  /* color */
  --bg: #07070a;
  --surface: #0e0e14;
  --surface-2: #15151d;
  --text: #e8e8ea;
  --text-dim: #9a9aa5;
  --accent: #7cff6b;
  --accent-2: #ff3dcb;
  --border: #232330;
  --focus: #7cff6b;

  /* type */
  --font-display: "VT323", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-hero: clamp(3rem, 6vw + 1rem, 8rem);
  --fs-h1: clamp(2rem, 3vw + 1rem, 3.5rem);
  --fs-h2: clamp(1.5rem, 2vw + 0.5rem, 2.25rem);
  --fs-body: clamp(1rem, 0.4vw + 0.9rem, 1.125rem);
  --fs-small: clamp(0.8rem, 0.2vw + 0.75rem, 0.9rem);
  --fs-label: clamp(0.9rem, 0.3vw + 0.8rem, 1.1rem);

  /* spacing */
  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;
  --space-7: 9rem;

  /* layout */
  --content-width: 72rem;
  --gutter: 1.25rem;
  --radius: 0.25rem;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (min-width: 48rem) {
  :root { --gutter: 2rem; }
}