/* ============================================================
   pages.css — shared stylesheet for AmpKeeper's small interstitial
   pages: thanks.html, beta-thanks.html, confirmed.html, privacy.html,
   help/ocpp-wallbox.html.

   SOURCE OF TRUTH: every custom property in the :root block below is
   copied by hand from the :root block inside index.html's own
   <style> element — that is where the brand palette, type ramp and
   spacing scale actually live. If the brand changes, index.html
   changes first, and this file's copies will drift until someone
   updates them to match.

   The duplication here is deliberate, not an oversight. These pages
   are plain files with no build step, so they cannot reach into a
   <style> block that lives inside a different HTML document, and
   there is no shared stylesheet the two sides already load. Pulling
   the tokens out into a real shared file was judged out of scope for
   this change: it would touch index.html for a reason unrelated to
   what that diff is actually about (wiring its forms to a new
   endpoint), which is exactly what makes a diff hard to review. The
   obvious follow-up is to extract a shared `brand-tokens.css` that
   both index.html and this file `@import` or `<link>`, retiring this
   copy — until that happens, treat index.html's :root as the
   authoritative copy and re-sync the values below by hand if they
   drift.
   ============================================================ */

:root {
  --color-bg: #101B2D;
  --color-surface: #17253C;
  --color-text: #F8F5EF;
  --color-accent: #F0A32F;
  --color-accent-300: #F9D89C;
  --color-divider: color-mix(in srgb, #F8F5EF 16%, transparent);
  --color-neutral-800: #26344B;

  --font-heading: "Space Grotesk", system-ui, sans-serif;
  --font-heading-weight: 500;
  --font-body: "Inter", system-ui, sans-serif;

  --space-3: 8.4px;
  --space-6: 16.8px;
  --radius-lg: 14px;
  --leading: 28px;
  --edge: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(900px 560px at 82% -120px,
      color-mix(in srgb, var(--color-accent) 14%, transparent), transparent 60%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: var(--leading);
  text-wrap: pretty;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--edge);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: var(--color-accent-300); }
a:hover { color: var(--color-accent); }

/* — top lockup, links home on every page — */
.page-nav { padding-block: var(--leading); }
.lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--color-text); }
.lockup img { width: 28px; height: 28px; }
.lockup span { font-family: var(--font-heading); font-weight: 600; font-size: 20px; letter-spacing: -0.015em; }

.kicker {
  display: block; font-size: 13px; line-height: 1; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-accent); margin: 0 0 var(--space-3);
}

/* — centred one-message interstitial (thanks / beta-thanks / confirmed) — */
.interstitial { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: calc(2 * var(--leading)); }
.interstitial h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(30px, 4.5vw, 44px); line-height: 1.15; letter-spacing: -0.018em; margin: 0;
}
.interstitial .lede { font-size: 18px; line-height: var(--leading); max-width: 46ch; margin: var(--space-6) 0 0; }
.interstitial .note { font-size: 14px; line-height: var(--leading); max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 62%, transparent); margin: var(--space-3) 0 0; }

.btn-home {
  display: inline-block; margin-top: var(--leading);
  padding: var(--space-3) var(--space-6); border: 1px solid var(--color-accent); border-radius: var(--radius-lg);
  color: var(--color-accent); text-decoration: none; font-family: var(--font-heading); font-size: 15px;
}
.btn-home:hover { background: color-mix(in srgb, var(--color-accent) 12%, transparent); color: var(--color-accent); }

/* — longer document page (privacy.html) — */
.doc { flex: 1; padding-block: var(--space-6) calc(2.5 * var(--leading)); max-width: 68ch; }
.doc h1 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 4vw, 38px); line-height: 1.2; letter-spacing: -0.018em; margin: 0 0 var(--space-3);
}
.doc .lede { font-size: 16px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0 0 var(--leading); }
.doc h2 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; line-height: var(--leading); letter-spacing: -0.01em;
  margin: calc(1.5 * var(--leading)) 0 var(--space-3);
}
.doc p, .doc li { color: color-mix(in srgb, var(--color-text) 82%, transparent); }
.doc p { margin: 0 0 var(--space-6); }
.doc ul, .doc ol { margin: 0 0 var(--space-6); padding-left: 1.2em; }
.doc li { margin: 0 0 var(--space-3); }
.doc li:last-child { margin-bottom: 0; }
.doc li > ul, .doc li > ol { margin-top: var(--space-3); }

.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: color-mix(in srgb, var(--color-text) 12%, transparent);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}
.doc pre {
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-6);
  overflow-x: auto;
  margin: 0 0 var(--space-6);
}
.doc pre code { background: none; padding: 0; }

.doc blockquote {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-6);
  border-left: 3px solid var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.doc blockquote p { margin: 0; }
.doc blockquote p + p { margin-top: var(--space-3); }

hr.rule {
  height: 1px; border: 0; margin: var(--leading) 0;
  background: linear-gradient(to right, var(--color-divider), transparent);
}

footer {
  padding: var(--leading) 0 calc(2 * var(--leading));
  font-size: 13px; line-height: var(--leading);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  border-top: 1px solid var(--color-neutral-800);
}
footer a { color: var(--color-accent-300); text-decoration: none; }
footer a:hover { color: var(--color-accent); text-decoration: underline; }