/* specs/frontend-design.md tokens, system-font stack only (intake is the
   very next click on the same referral link as the landing page — same
   phone-on-a-bad-connection budget, no webfont round trip). Raw hex, not
   shared with core/base.css: core's stylesheet also declares the admin
   console's self-hosted webfonts, and this is a public, pre-login surface
   that must load zero of them. */
:root {
  --paper: #F5F6F7;
  --ink: #14181C;
  --ink-muted: #5B6570;
  --line: #D5D9DC;
  --attention: #C77A22;
  --lost: #8B4A4A;
  --input-bg: #fff;
  --button-hover: #2A3138;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1B1F23;
    --ink: #EDEFF1;
    --ink-muted: #9AA4AD;
    --line: #33393E;
    --attention: #D98A3D;
    --lost: #A6635F;
    --input-bg: var(--line);
    --button-hover: #D5D9DC;
  }
}

* { box-sizing: border-box; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  margin: 0 auto;
  max-width: 40rem;
  padding: 32px 20px 64px;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
}

h1 { font-size: 1.75rem; margin: 0 0 8px; }
body > p:first-of-type { color: var(--ink-muted); margin: 0 0 32px; }

fieldset {
  border: none;
  border-top: 1px solid var(--line);
  padding: 24px 0 0;
  margin: 0 0 24px;
}
legend {
  padding: 0;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", "Roboto Mono", monospace;
  font-size: 0.8125rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  margin-bottom: 8px;
}

label { display: block; font-weight: 600; margin-top: 16px; margin-bottom: 4px; }
label:first-child { margin-top: 0; }

input[type=text], input[type=email], input[type=url], input[type=tel], textarea, select {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--input-bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 8px 12px;
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--attention); outline-offset: 1px; border-color: var(--ink); }
input[readonly] { background: var(--paper); color: var(--ink-muted); }
textarea { min-height: 5rem; }

.error { color: var(--lost); font-size: 0.9375rem; margin: 4px 0 0; }
.help { color: var(--ink-muted); font-size: 0.9375rem; }
details.help, details > summary.help { margin-top: 4px; }

.honeypot { position: absolute; left: -9999px; top: -9999px; }

button {
  margin-top: 8px;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  border-radius: 4px;
  padding: 12px 24px;
  cursor: pointer;
}
button:hover { background: var(--button-hover); }
button:focus-visible { outline: 2px solid var(--attention); outline-offset: 2px; }

.label-inline { font-weight: normal; display: inline-block; margin-right: 24px; margin-top: 8px; }

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

@media (max-width: 600px) {
  body { padding: 16px 16px 48px; }
}