/* ============================================================
   TailoredReaders — shared design system
   The "Verdant Clarity" tokens, base styles, and reusable
   components shared by every prelaunch page. Page-specific
   layout stays in each page's inline <style>.

   System fonts only => no web-font fetch => no flash of
   unstyled text. Linked in <head> (render-blocking), so the
   page never paints before these rules are applied.
   ============================================================ */

:root {
  /* ---- Verdant Clarity palette (light) ---- */
  --color-surface: #faf9f6;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f4f4f0;
  --color-surface-container: #eeeeea;
  --color-surface-container-high: #e8e8e5;
  --color-on-surface: #1a1c1a;
  --color-on-surface-variant: #424842;
  --color-outline-variant: #c1c8c0;
  --color-primary: #153b25;
  --color-on-primary: #ffffff;
  --color-primary-container: #2d523a;
  --color-on-primary-container: #9bc4a5;
  --color-primary-fixed: #c2edcc;
  --color-secondary: #5b5f5e;
  --color-accent-gold: #f8bd3e;

  /* ---- System font stacks (no web fonts) ---- */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-reading: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font-editorial: "Hoefler Text", "Baskerville Old Face", "Big Caslon", Garamond, Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ---- Radii / shadows ---- */
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;
  --shadow-2: 0 12px 24px -8px rgba(21, 59, 37, 0.10);
  --shadow-book: 25px 25px 50px rgba(0, 0, 0, 0.1), -5px 0 15px rgba(0, 0, 0, 0.05);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---- Fluid spacing ---- */
  --pad-x: clamp(20px, 5vw, 64px);
  --pad-y: clamp(56px, 8vw, 96px);

  /* ---- Shared widths (keep every page consistent) ---- */
  --container: 1120px;   /* outer content column, used by every .wrap */
  --measure: 680px;      /* readable line length for standalone prose */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  /* overflow-x guard: rotated mockups + floating cards can poke past the
     viewport edge on small screens; clip keeps a stray scrollbar away. */
  overflow-x: hidden;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
h1, h2, h3, p { margin: 0; }
a { color: var(--color-secondary); }
a:hover { color: var(--color-primary); }

/* Every page shares one content column + one section rhythm. */
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.section { padding-block: var(--pad-y); }
/* Standalone prose (intros, headers) shares one readable width. */
.measure { max-width: var(--measure); }

/* Flex/grid children default to min-width:auto, so a wide child refuses to
   shrink and pushes the page past the viewport. min-width:0 lets nav items
   shrink and wrap; pages add their own selectors for their own grids. */
.nav > * { min-width: 0; }

/* ---- Icons (inline SVG, inherit text color) ---- */
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; vertical-align: -0.125em; }

/* ---- Buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font-family: var(--font-body); font-weight: 700; font-size: 16px; line-height: 1;
       border-radius: var(--radius-full); cursor: pointer; text-decoration: none;
       transition: transform .2s var(--ease-standard), box-shadow .2s var(--ease-standard), background .2s; }
.btn .icon { width: 1.15em; height: 1.15em; }
.btn-primary { background: var(--color-primary); color: var(--color-on-primary); border: none; padding: 14px 28px; }
.btn-primary:hover { transform: scale(1.02); box-shadow: var(--shadow-2); color: var(--color-on-primary); }
.btn-secondary { background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); padding: 12px 26px; }
.btn-secondary:hover { background: var(--color-primary-fixed); color: var(--color-primary); }
.btn-invert { background: var(--color-on-primary); color: var(--color-primary); border: none; padding: 16px 32px; font-size: 17px; }
.btn-invert:hover { color: var(--color-primary); transform: scale(1.02); }

/* ---- Pills / tags ---- */
.eyebrow { display: inline-block; padding: 6px 16px; border-radius: var(--radius-full);
           background: var(--color-primary-fixed); color: var(--color-primary-container);
           font: 500 14px/1.4 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.tag { display: inline-flex; align-items: center; gap: 6px; padding: 8px 18px; border-radius: var(--radius-full);
       background: var(--color-surface-container-lowest); border: 1px solid var(--color-outline-variant);
       font: 500 14px/1.2 var(--font-mono); color: var(--color-on-surface); letter-spacing: 0.05em; white-space: nowrap; }
.tag .icon { width: 16px; height: 16px; }

/* ---- Type helpers ---- */
.h-lg { font: 700 clamp(28px, 4vw, 32px)/1.25 var(--font-display); color: var(--color-primary); }
.h-md { font: 600 22px/1.3 var(--font-display); }
.lead { font: 400 clamp(16px, 2.2vw, 18px)/1.6 var(--font-body); color: var(--color-on-surface-variant); }
.step-num { font: 700 13px/1 var(--font-mono); letter-spacing: 0.05em; color: var(--color-primary); }

/* ---- Waitlist form (email capture; used on the landing) ---- */
.waitlist { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.waitlist-input { flex: 1 1 260px; min-width: 0; padding: 14px 20px;
                  font: 400 16px/1 var(--font-body); color: var(--color-on-surface);
                  background: var(--color-surface-container-lowest);
                  border: 1px solid var(--color-outline-variant); border-radius: var(--radius-full); }
.waitlist-input::placeholder { color: var(--color-secondary); }
.waitlist-input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: transparent; }
/* Status line lives on its own row under the field/button. */
.waitlist-msg { flex-basis: 100%; margin: 0; min-height: 1.2em;
                font: 500 14px/1.4 var(--font-mono); color: var(--color-on-surface-variant); }
.waitlist-msg[data-state="ok"] { color: var(--color-primary); }
.waitlist-msg[data-state="error"] { color: #b3261e; }
/* Consent / privacy microcopy under the form. */
.waitlist-consent { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--color-on-surface-variant); }
.waitlist-consent a { color: inherit; text-decoration: underline; }
.waitlist-consent a:hover { color: var(--color-primary); }

/* Honeypot field: kept in the DOM (bots fill it) but moved off-screen for humans.
   Not display:none — some bots skip obviously-hidden fields. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ============================ NAV ============================ */
/* Full-bleed header: the divider line spans the viewport, content stays in .wrap. */
.site-header { border-bottom: 1px solid var(--color-outline-variant); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
       padding-block: 24px; }
.brand { font: 700 24px/1 var(--font-display); color: var(--color-primary); text-decoration: none; }

/* ============================ FOOTER ============================ */
/* Full-bleed band: background spans the viewport, content stays in .wrap. */
.footer { padding-block: 48px; background: var(--color-surface-container-high); border-top: 1px solid var(--color-outline-variant); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.footer .brand { font-size: 22px; }
.footer .copy { font: 500 14px/1.4 var(--font-mono); color: var(--color-on-surface-variant); margin-top: 4px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--color-secondary); text-decoration: underline; font: 500 14px/1.4 var(--font-mono); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}
