@import url("/static/tokens.css");      /* design tokens (single source) */
@import url("/static/components.css");   /* shared component layer (single source) */
/* both files are copies of web/src/styles/*, synced by `make assets`/`assets-css` */

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal);
  min-height: 100vh;   /* fallback: old browsers */
  min-height: 100svh;  /* smallest viewport, no phantom scroll from URL bar */
  display: flex;
  flex-direction: column;
}
.container { max-width: 800px; margin: 0 auto; padding: var(--space-6) var(--space-4); }
main.container { flex: 1; }
.hero-cta { text-align: center; }
h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); }
h2 { font-size: var(--text-xl); margin-top: var(--space-6); }
a { color: var(--accent); }

/* Field layout wrapper (label + control). Controls use the shared .field-input. */
.field { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); }
.field label { font-weight: var(--weight-semibold); }
.field .error-text { color: var(--error); font-size: var(--text-sm); }

@media (max-width: 600px) { .container { padding: var(--space-5) var(--space-3); } }