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

:root {
  color-scheme: light dark;

  --indigo: #5746f5;
  --lime: #c7ff00;
  --teal: #00a87e;
  --light-blue: #007bc2;
  --orange: #ec7e00;
  --pink: #e61e49;

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --type-display-xxl: 500 96px/1 var(--font-sans);
  --type-display-lg: 500 48px/1.1 var(--font-sans);
  --type-caption: 400 13px/1.4 var(--font-sans);

  --tracking-display-xxl: -2.88px;
  --tracking-display-lg: -0.96px;

  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;

  --surface: light-dark(#f4f4f4, #0a0a0a);
  --text: light-dark(#191c1f, #ffffff);
  --text-mute: light-dark(#505a63, rgba(255, 255, 255, 0.72));
  --text-faint: light-dark(#5c5e60, rgba(255, 255, 255, 0.52));
  --accent-text: light-dark(#5746f5, #8b7fff);

  --focus-outline: 2px solid var(--accent-text);
  --focus-offset: 2px;
}