:root {
  --color-white: #ffffff;
  --color-ink: #111111;
  --color-text: #161615;
  --color-card: #333131;
  --color-ui-dark: #2b2e34;
  --color-blue: #36a9e1;
  --color-orange: #f39200;
  --color-lime: #afcb2e;
  --color-magenta: #a3195b;
  --color-interaction: #111111;
  --color-interaction-contrast: #ffffff;
  --color-focus: #111111;
  --color-gray-700: #707070;
  --color-gray-500: #999999;
  --color-gray-300: #d6d6d6;
  --color-error: #b42318;

  --font-primary: "proxima-nova", Arial, Helvetica, sans-serif;
  --font-regular: 400;
  --font-bold: 700;

  --container: 76rem;
  --container-narrow: 58rem;
  --page-gutter: clamp(1.125rem, 4vw, 4rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  --radius-card: 1.65rem;
  --radius-small: 1.1rem;
  --radius-pill: 999px;
  --shadow-ui: 0 0.35rem 1rem rgb(0 0 0 / 0.17);
  --focus-ring: 0 0 0 0.22rem var(--color-focus);

  --header-height: clamp(4.5rem, 9vw, 6.75rem);
  --transition-fast: 180ms ease;
  --transition-medium: 360ms cubic-bezier(0.2, 0.75, 0.25, 1);
}

@media (max-width: 767px) {
  :root {
    --page-gutter: clamp(1.125rem, 5vw, 1.5rem);
    --radius-card: 1.55rem;
  }
}