@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/hanken-grotesk-latin-800-normal.woff2") format("woff2");
}

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

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

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

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");
}

:root {
  --bg: #070b14;
  --bg-raised: #0c1424;
  --navy: #08111f;
  --ink: #f3f6fb;
  --muted: #a7b3c6;
  --quiet: #7d8ba0;
  --line: rgba(214, 228, 255, 0.12);
  --blue: #3b82f6;
  --blue-deep: #1d4ed8;
  --cyan: #67e8f9;
  --violet: #8b7cf7;
  --white: #ffffff;
  --danger: #f0a8a8;
  --ok: #8ee0b5;
  --light: #f4f7fb;
  --light-ink: #101828;
  --light-muted: #475467;
  --font-display: "Hanken Grotesk", "Segoe UI", sans-serif;
  --font-body: Inter, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --wrap: 76rem;
  --gutter: 1.25rem;
  --header-offset: 6.5rem;
  --radius: 1.25rem;
  --shadow-float: 0 18px 50px rgba(0, 0, 0, 0.35);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (min-width: 1024px) {
  :root {
    --gutter: 2rem;
    --header-offset: 7.5rem;
  }
}