/* Tokens */

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

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono.woff2") format("woff2");
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Colors */
  --space:   #061F21;
  --osmosis: #132F2A;
  --sun:     #F28E25;
  --flame:   #24FFB2;
  --bland:   #68A298;
  --white:   #F3F3F3;

  /* Derived surfaces */
  --surface-1: var(--osmosis);
  --surface-0: var(--space);
  --border-soft: rgba(104, 162, 152, 0.35);
  --border-strong: rgba(36, 255, 178, 0.5);

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* Layout */
  --wrap-max: 75rem;
  --radius-sm: 0.4rem;
  --radius-md: 0.9rem;
  --radius-lg: 1.6rem;
  --radius-pill: 62.5rem;
}