@font-face {
  font-family: Manrope;
  src: url("../assets/fonts/manrope-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
:root {
  --ink: #070a12;
  --navy: #071827;
  --navy-2: #0d2a43;
  --paper: #f7f7f4;
  --white: #fff;
  --text: #111318;
  --muted: #5d6572;
  --line: #dde2ea;
  --brand: #3d56f0;
  --electric: #7f91ff;
  --cyan: #25f4ee;
  --red: #fe2c55;
  --font:
    Manrope, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --canvas: min(1320px, calc(100vw - 64px));
  --gutter: max(24px, calc((100vw - 1320px) / 2));
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;
  --s10: 128px;
  --s11: 160px;
  --r-media: 8px;
  --r-card: 12px;
  --r-large: 18px;
  --pill: 999px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
@media (max-width: 767px) {
  :root {
    --canvas: calc(100vw - 32px);
    --gutter: 16px;
  }
}