/* The site's own vocabulary, once. Everything outside the renderer (the landing page and the
   content pages) links this instead of pasting the palette and the base typography into its own
   <style> block.
   One palette with the renderer: these six tokens carry App.css's cool light and dark values
   (--tc-bg, --tc-text, --tc-text-dim, --tc-border, --tc-surface) and the brand green, so the site
   and the app read as one product. They stay six site-named tokens rather than aliases of --tc-*,
   because App.css also carries the renderer's whole theme and a user-set accent that a static page
   has no use for. sitePalette.selfcheck.ts asserts the values still match, which is what keeps the
   two from drifting again. The greens differ per theme on purpose (brand/tokens.css): no one green
   holds contrast on both grounds.
   A page keeps in its own <style> only what is genuinely its own: the landing page's demo and
   action buttons, the privacy page's summary box. */

:root {
  --bg: #f5f6f8;
  --fg: #1a1f2e;
  --muted: #666;
  --rule: #c3cbdb;
  --accent: #2f6f4f;
  --card: #fff;
}

/* Two selectors, one palette: the media query follows the OS unless the reader has explicitly
   chosen light, and [data-theme="dark"] is an explicit choice that wins regardless of the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f14;
    --fg: #e5e5e5;
    --muted: #999;
    --rule: #445069;
    --accent: #5fb589;
    --card: #1c2333;
  }
}

:root[data-theme="dark"] {
  --bg: #0d0f14;
  --fg: #e5e5e5;
  --muted: #999;
  --rule: #445069;
  --accent: #5fb589;
  --card: #1c2333;
}

* { box-sizing: border-box; }

body {
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--fg);
  margin: 0;
}

/* The reading column. The masthead sits outside it so it spans the page, as the renderer's does. */
.page { max-width: 44rem; margin: 0 auto; padding: 2.5rem 16px 6rem; }

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

h1 { font-size: 1.8rem; line-height: 1.2; margin: 0 0 .3rem; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 2.8rem 0 .6rem; }
h3 { font-size: 1rem; margin: 1.8rem 0 .4rem; }

ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }

code { background: var(--card); padding: .1em .35em; border-radius: 3px; font-size: .9em; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { font-weight: 600; }

footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: .92rem; }
footer a { color: var(--muted); }

.note, .muted { color: var(--muted); font-size: .92rem; }