/* website/css/tokens.css */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/anton-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/archivo-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/archivo-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/archivo-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/archivo-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../assets/fonts/archivo-800.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-300.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/dm-mono-500.woff2') format('woff2');
}

:root {
  /* type */
  --font-display: 'Anton', sans-serif;
  --font-body: 'Archivo', sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* color */
  --ink-on-light: #141210;
  --ink-on-dark: #F3F0E9;
  --bg-void: #0B0B0B;
  --paper: #F0EDE4;
  --accent-acid: #E8FF1F;
  --accent-red: #E8352A;
  --accent-navy: #1E2A5E;
  --accent-teal: #0FA968;
  --accent-live: var(--accent-acid); /* re-targeted at runtime by accent-picker.js (Task 4) */
  --hairline: rgba(20, 18, 16, 0.14);
  --hairline-dark: rgba(243, 240, 233, 0.16);

  /* condition gradients (sampled from live captures, see spec) */
  --grad-clear-a: #F2A97E;
  --grad-clear-b: #E8714A;
  --grad-rain-a: #5B78AE;
  --grad-rain-b: #3F5589;
  --grad-overcast-a: #8B87A0;
  --grad-overcast-b: #5C5871;

  /* spacing scale */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 40px;
  --space-5: 64px;
  --space-6: 96px;
  --space-7: 144px;

  /* motion */
  --ease-standard: cubic-bezier(.2, .7, .3, 1);
}