@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Switzer";
  src: url("assets/fonts/switzer-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --raw-night: #090b07;
  --raw-night-raised: #11150c;
  --raw-night-soft: #18200d;
  --raw-ivory: #f7fced;
  --raw-sage: #aeb7a2;
  --raw-lime: #c0f53d;
  --raw-ink-on-lime: #0b0e07;

  --color-canvas: var(--raw-night);
  --color-surface: var(--raw-night-raised);
  --color-surface-strong: var(--raw-night-soft);
  --color-ink: var(--raw-ivory);
  --color-ink-soft: var(--raw-sage);
  --color-accent: var(--raw-lime);
  --color-accent-ink: var(--raw-ink-on-lime);
  --color-line: rgb(247 252 237 / 0.16);
  --color-line-soft: rgb(247 252 237 / 0.09);

  --font-display: "Switzer", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Switzer", "Helvetica Neue", Arial, sans-serif;

  --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;
  --space-10: 8rem;
  --space-11: 12rem;

  --gutter: clamp(1.25rem, 3.4vw, 4.5rem);
  --shell: 94rem;
  --section-space: clamp(6rem, 12vw, 12rem);
  --radius-media: 1.5rem;
  --radius-control: 1rem;
  --radius-pill: 999px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  --sc-canvas: var(--color-canvas);
  --sc-surface: var(--color-surface);
  --sc-ink: var(--color-ink);
  --sc-ink-soft: var(--color-ink-soft);
  --sc-accent: var(--color-accent);
  --sc-accent-ink: var(--color-accent-ink);
  --sc-font-display: var(--font-display);
  --sc-font-text: var(--font-text);
}