@font-face {
  font-family: "Rasterkin Display";
  src: url("../fonts/rasterkin-display/RasterkinDisplay-Grid.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

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

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/IBMPlexMono-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --raster-black: #0a0a09;
  --canvas-bone: #f2ebdd;
  --spectrum-red: #f7193a;
  --signal-orange: #ff4d22;
  --spectrum-yellow: #ffd31a;
  --spectrum-green: #64d52f;
  --spectrum-cyan: #12b7e8;
  --electric-cobalt: #3155ff;
  --spectrum-violet: #9125dd;
  --spectrum-1: var(--spectrum-red);
  --spectrum-2: var(--signal-orange);
  --spectrum-3: var(--spectrum-yellow);
  --spectrum-4: var(--spectrum-green);
  --spectrum-5: var(--spectrum-cyan);
  --spectrum-6: var(--electric-cobalt);
  --spectrum-7: var(--spectrum-violet);
  --carbon: #171714;
  --canvas-light: #fffdf7;
  --graphite: #5e5a52;
  --grid-line: #cac1b1;
  --grid-line-dark: #34342f;

  --font-display: "Rasterkin Display", "IBM Plex Mono", monospace;
  --font-editorial: "Bricolage Grotesque", "Arial Black", sans-serif;
  --font-body: "Inter", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --duration-instant: 80ms;
  --duration-quick: 160ms;
  --duration-standard: 240ms;
  --duration-deliberate: 420ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-shift: cubic-bezier(0.2, 0.8, 0.2, 1);

  --page-gutter: clamp(1rem, 3vw, 3.5rem);
  --max-width: 120rem;
}