@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/clash-grotesk/ClashGrotesk-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Grotesk";
  src: url("../fonts/clash-grotesk/ClashGrotesk-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("../fonts/satoshi/Satoshi-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #ffffff;
  --color-band: #eef1f4;
  --color-stone: #ffffff;
  --color-stone-2: #d5dbe2;
  --color-text: #1a1d21;
  --color-text-hi: #111418;
  --color-accent: #00aaff;
  --color-accent-2: #00c4ff;
  --color-muted: #5c6570;
  --color-error: #ef4444;
  --font-display: "Clash Grotesk", system-ui, sans-serif;
  --font-body: "Satoshi", system-ui, sans-serif;
  --space: 0.5rem;
  --max: 1200px;
  --nav: 88px;
  --radius: 1.15rem;
  --scroll: 0;
}