@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin-variable.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

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

* { box-sizing: border-box; }

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--bg-canvas);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--bg-canvas);
  color: var(--text-primary);
  font: 400 15px/1.5 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea { color: inherit; font: inherit; }

button,
a,
select { -webkit-tap-highlight-color: transparent; }

button { border: 0; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

h1,
h2,
h3,
p { margin-block: 0; }

h1 { font-size: clamp(1.25rem, 1.4vw, 1.6rem); line-height: 1.2; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.2rem, 1.7vw, 1.65rem); line-height: 1.25; letter-spacing: -0.025em; }
h3 { font-size: 1rem; line-height: 1.35; }

button,
[role="button"],
a,
select,
input,
textarea { outline: none; }

:focus-visible { box-shadow: var(--focus-ring); }

::selection { background: var(--brand-primary); color: #fff; }

[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset: 8px auto auto 8px;
  translate: 0 -150%;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: var(--text-primary);
  color: var(--bg-surface);
  font-weight: 700;
}

.skip-link:focus { translate: 0; }

.muted { color: var(--text-secondary); }
.subtle { color: var(--text-muted); }
.mono { font-family: var(--font-mono); }
.numeric { font-variant-numeric: tabular-nums; }

.eyebrow {
  color: var(--text-muted);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spinner {
  width: 22px;
  height: 22px;
  border: 2px solid var(--border-subtle);
  border-top-color: var(--brand-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin { to { rotate: 360deg; } }

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