/* Hook404 — design tokens (shared by / , /docs, /proof, /feed, /404.html).
   Owner: LANDING. Stable: add, don't rename. Fonts are self-hosted in /fonts. */

@font-face { font-family: "Anton"; src: url("/fonts/anton-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* color — light page, dark terminal. Red ONLY for rejection, green ONLY for admitted. */
  --bg: #FFFFFF;
  --ink: #111111;
  --ink-2: #4A4A4A;        /* secondary text */
  --ink-3: #8A8A8A;        /* tertiary / labels */
  --line: #E6E6E6;         /* hairlines, borders */
  --line-2: #CFCFCF;       /* stronger border (hover) */
  --paper-2: #F6F6F6;      /* subtle fill (code blocks, disabled) */

  --term: #0B0B0B;         /* terminal background */
  --term-ink: #D7D7D7;     /* terminal text */
  --term-dim: #6E6E6E;     /* terminal secondary */
  --term-line: #222222;    /* terminal hairline */

  --red: #E5322D;          /* 404 / HumansNotFound() only */
  --green: #1DB954;        /* 200 / agent admitted only */
  --amber: #E3B341;        /* 503 / degraded notices only (terminal) */

  /* type */
  --font-display: "Anton", "Bebas Neue", "Impact", "Arial Narrow", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 15px;
  --fs-md: 17px;
  --fs-lg: 20px;
  --fs-xl: clamp(24px, 2.4vw, 32px);
  --fs-2xl: clamp(30px, 3.6vw, 48px);
  --fs-display: clamp(56px, 8vw, 120px);

  --lh-tight: 1.1;
  --lh-snug: 1.3;
  --lh-body: 1.55;
  --track-label: 0.08em;   /* uppercase mono labels */

  /* space (4px base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --gutter: clamp(16px, 3vw, 40px);
  --maxw: 1360px;
  --radius: 2px;
  --header-h: 56px;
}

/* minimal shared base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--fs-base); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--ink); }
code, pre, kbd, samp, .mono { font-family: var(--font-mono); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
::selection { background: var(--ink); color: var(--bg); }

.label {
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500;
  letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink-3);
}
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  height: 44px; padding: 0 var(--s-5); border: 1px solid var(--ink); border-radius: var(--radius);
  background: var(--ink); color: var(--bg); font: 500 var(--fs-base)/1 var(--font-body);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.btn:hover { background: #2A2A2A; }
.btn--ghost { background: var(--bg); color: var(--ink); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--sm { height: 32px; padding: 0 var(--s-3); font-size: var(--fs-sm); }
.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--paper-2); color: var(--ink-3); border-color: var(--line); cursor: not-allowed;
}

/* status colors (semantic, never decorative) */
.is-404 { color: var(--red); }
.is-200 { color: var(--green); }
.is-503 { color: var(--amber); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}