@font-face {
  font-family: "Hanken Grotesk";
  src: url("./assets/hanken-grotesk.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Palanquin Dark";
  src: url("./assets/palanquin-dark-500.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Palanquin Dark";
  src: url("./assets/palanquin-dark-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Palanquin Dark";
  src: url("./assets/palanquin-dark-700.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("./assets/jetbrains-mono.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --ink: #0c0c0e;
  --panel: #131316;
  --panel-2: #16181d;
  --line: #23232a;
  --paper: #f2f0ea;
  --muted: #8e8c86;
  --brand: #e45310;
  --amber: #ffcd35;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-display: "Palanquin Dark", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-6xl: 6rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin-block: 0; }
h1, h2, h3 { font-family: var(--font-display); }
a { color: inherit; }
img { display: block; max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
