/* gate-factory design tokens — FROZEN 2026-07-19 (WP1, see DESIGN.md)
   Post-wave-1 changes require a verdict-driven reason.
   All color pairs computed against WCAG AA at freeze; ratios in DESIGN.md §4. */

:root {
  color-scheme: light;

  /* type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;   /* 13px microcopy, tiny print */
  --text-sm: 0.9375rem;   /* 15px labels, meta, tables */
  --text-base: 1.0625rem; /* 17px body — floor, never smaller */
  --text-lg: 1.25rem;     /* 20px subhead/dek */
  --text-xl: 1.375rem;    /* h2 → 24px at ≥40em */
  --text-2xl: 1.75rem;    /* article h1 → 30px at ≥40em */
  --text-3xl: 2rem;       /* landing h1 → 38px at ≥40em */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-heading: 650;
  --weight-bold: 700;
  --leading-body: 1.65;
  --leading-sub: 1.55;
  --leading-ui: 1.5;
  --leading-snug: 1.3;
  --leading-heading: 1.25;
  --leading-tight: 1.15;
  --tracking-label: 0.08em;
  --tracking-headline: -0.015em;

  /* neutrals (warm paper) */
  --paper: #FAF9F6;
  --surface: #FFFFFF;
  --ink: #1A1A18;      /* 16.55:1 on paper */
  --ink-2: #52504A;    /*  7.66:1 */
  --ink-3: #6B675E;    /*  5.35:1 */
  --rule: #DEDBD3;     /* decorative hairlines only — never interactive */
  --border: #8C8779;   /* interactive boundaries — 3.59:1 vs surface */
  --code-bg: #F4F3EF;  /* inline + pre code background */

  /* states (shared across gates) */
  --error: #B3261E;    /* inline messages — 6.21:1 on paper, 6.54:1 on surface */
  --success: #1E7A4C;  /* success glyph only (icon 3:1 bar) — worst case 4.48:1 on care tint */

  /* accent — three steps, strict roles (tint=bg only · accent=links/rules/focus · btn=text-bearing fill).
     Root defaults are a deliberately UNBRANDED gray fallback: a page missing (or typoing)
     data-gate renders visibly colorless instead of silently borrowing another gate's palette.
     Every gate — including recover — goes through its override block below. */
  --accent-tint: #F0EFEA;
  --accent: #52504A;      /* = ink-2; 7.66:1 on paper */
  --accent-btn: #45443F;  /* 9.76:1 w/ white */
  --accent-btn-hover: #3A3935;

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

  /* shape + layout */
  --radius: 6px;
  --measure: 40rem;
  --control-h: 48px;
  --turnstile-w: 300px;
  --turnstile-h: 65px;
  --focus-ring: 2px solid var(--accent);
  --focus-offset: 2px;
  --motion-fast: 120ms;
}

/* NOTE: custom properties cannot appear in @media conditions — breakpoint is literal 40em (DESIGN.md §8) */
@media (min-width: 40em) {
  :root {
    --text-xl: 1.5rem;
    --text-2xl: 1.875rem;
    --text-3xl: 2.375rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root { --motion-fast: 0ms; }
}

/* per-gate overrides — the ONLY thing that changes between gates.
   gate #4 = copy one of these blocks + a content dir. */
[data-gate="recover"] {
  --accent-tint: #E9F4F4;
  --accent: #0E6B80;      /* 5.81:1 on paper */
  --accent-btn: #12566B;  /* 8.17:1 w/ white */
  --accent-btn-hover: #0E4658;
}
[data-gate="books"] {
  --accent-tint: #E7F2EA;
  --accent: #1B7048;      /* 5.77:1 on paper */
  --accent-btn: #14603E;  /* 7.57:1 w/ white */
  --accent-btn-hover: #104D32;
}
[data-gate="care"] {
  --accent-tint: #F6E9E0;
  --accent: #A8592E;      /* 4.83:1 on paper */
  --accent-btn: #7E401F;  /* 7.95:1 w/ white */
  --accent-btn-hover: #653319;
}

/* gate-factory template chrome — consumes tokens.css custom properties.
   Concatenated after tokens.css at build time into the single shipped stylesheet. */

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

.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;
}

a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-btn); transition: color var(--motion-fast); }

:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
}

.wrap {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--space-5);
}

/* masthead */
.masthead {
  padding-block-start: var(--space-6);
  padding-block-end: var(--space-4);
}
.masthead-word {
  margin: 0;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-headline);
  color: var(--ink);
}
.masthead-role {
  margin: var(--space-1) 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--ink-2);
}
.masthead-rule {
  height: 2px;
  background: var(--accent);
  border: 0;
  margin: 0;
}

/* generic section rhythm */
.section {
  padding-block: var(--space-8);
}
.section + .section {
  border-top: 1px solid var(--rule);
}
@media (min-width: 40em) {
  .section { padding-block: var(--space-9); }
}

.section-label {
  margin: 0 0 var(--space-5);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--ink-3);
}

/* hero */
.hero h1 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-headline);
  line-height: var(--leading-tight);
  color: var(--ink);
}
.hero .dek {
  margin: 0 0 var(--space-6);
  font-size: var(--text-lg);
  line-height: var(--leading-sub);
  color: var(--ink-2);
}
.trust-line-micro {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}
.trust-line-micro a { color: var(--ink-3); text-decoration: underline; }

/* problem mirror + prose blocks */
.prose p {
  margin: 0 0 var(--space-5);
  color: var(--ink-2);
}
.prose p:last-child { margin-bottom: 0; }

/* what it does */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.plain-list li {
  padding-block: var(--space-4);
  color: var(--ink-2);
}
.plain-list li + li { border-top: 1px solid var(--rule); }
.plain-list li::before {
  content: "\2014";
  color: var(--ink-3);
  margin-right: var(--space-2);
}

/* not-for / disqualifier */
.not-for p {
  margin: 0;
  color: var(--ink-2);
}

/* Q&A rows */
.qa-row + .qa-row {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
}
.qa-q {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.qa-a {
  margin: 0;
  font-size: var(--text-base);
  color: var(--ink-2);
}

/* form */
.form-unit { margin-top: var(--space-2); }

form[data-waitlist-form] { margin: 0; }

.field-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
@media (min-width: 40em) {
  .field-row { flex-direction: row; align-items: flex-start; }
  .field-row .field-group { flex: 1; }
}

.field-group { width: 100%; }

.input {
  width: 100%;
  height: var(--control-h);
  padding-inline: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem; /* 16px floor — prevents iOS zoom */
  font-family: var(--font-sans);
}
.input::placeholder { color: var(--ink-3); }
.input[aria-invalid="true"] { border-color: var(--error); }

.btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--control-h);
  padding-inline: var(--space-5);
  background: var(--accent-btn);
  color: #fff;
  font-size: 1rem;
  font-weight: var(--weight-semibold);
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--motion-fast);
}
.btn-submit:hover { background: var(--accent-btn-hover); }
.btn-submit:disabled { opacity: 0.7; cursor: default; }

.field-error {
  margin: var(--space-2) 0 0;
  font-size: var(--text-xs);
  color: var(--error);
  min-height: 1em;
}

.hp-wrap {
  position: absolute;
  left: -9999px;
  clip-path: inset(50%);
  pointer-events: none;
}

.turnstile-slot {
  width: var(--turnstile-w);
  max-width: 100%;
  min-height: 0;
  margin-top: var(--space-3);
}
.turnstile-slot:not(:empty) { min-height: var(--turnstile-h); }

.form-microcopy {
  margin: var(--space-3) 0 0;
  font-size: var(--text-xs);
  color: var(--ink-3);
}

/* success card */
.success-card {
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  padding: var(--space-5);
}
.success-card[hidden] { display: none; }
.success-icon { display: block; margin-bottom: var(--space-3); color: var(--success); }
.success-card h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--ink);
}
.success-card p { margin: 0; color: var(--ink-2); }
.success-card .quiet-link { display: inline-block; margin-top: var(--space-3); }
.success-card .quiet-link a { color: var(--ink-2); text-decoration: underline; }

/* signed close */
.signed-close {
  margin-top: var(--space-7);
  font-size: var(--text-base);
  color: var(--ink-2);
}
.signed-close a { text-decoration: underline; }

/* footer */
footer {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-6);
  font-size: var(--text-xs);
  color: var(--ink-3);
}
footer p { margin: 0 0 var(--space-2); }
footer p:last-child { margin-bottom: 0; }
footer a { color: var(--ink-3); text-decoration: underline; }

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