/* Passmint marketing site — shared base styles + colour tokens.
 *
 * Two things live here: the :root palette below (used by all three pages,
 * including from inline style= attributes), and the base rules that were
 * byte-identical across index.html / privacy.html / terms.html. Everything
 * page-specific (layout, animation, components, per-page typography) stays
 * inline in that page's own <style> block, loaded AFTER this stylesheet so it
 * can extend (not fight) these base rules.
 *
 * ---- Palette ----
 * Cool neutral near-black derived from Radix Slate (dark). It replaced a
 * green-tinted ramp whose neutrals sat on the same hue as the mint accent, so
 * the accent had nothing to push against and the page read as monochrome.
 *
 * Radix is used for the same reason the APP's light palette uses it (see
 * src/theme/tokens.ts): its steps are positioned against WCAG thresholds
 * rather than picked by eye. Step 11 is the accessible low-contrast text step,
 * step 12 the high-contrast one. The old --text-faint equivalent (#6B726C)
 * measured 3.99:1 and quietly FAILED the 4.5:1 body floor; the new one passes.
 *
 * Ratios below are measured against --bg. KEEP THEM CURRENT when a value
 * changes — they are the only record that this palette is accessible, since
 * nothing in CI checks the site's contrast.
 */

:root {
  --bg:         #0B0C0E;  /* page — deep, cool, deliberately not pure black */
  --bg-elev:    #111113;  /* banner, cards, tooltips        (slate-1)  */
  --bg-surf:    #18191B;  /* phone frame, chips, scan face  (slate-2)  */
  --line:       #363A3F;  /* strong border                  (slate-6)  */
  --line-soft:  rgba(255, 255, 255, 0.07);
  --text:       #EDEEF0;  /* headings                (slate-12) 16.86:1 */
  --text-dim:   #B0B4BA;  /* body copy               (slate-11)  9.40:1 */
  --text-faint: #777B84;  /* captions, mono labels   (slate-10)  4.61:1 */
  --accent:     #8FD3AC;  /* mint — brand, unchanged           11.26:1 */
  --accent-hi:  #A9E0C1;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
}

* {
  box-sizing: border-box;
}

::selection {
  background: rgba(143, 211, 172, 0.25);
}

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

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