:root {
  /* ---- space: 4/8/12/16/24/32/48px, as rem ---- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;

  /* ---- radius ---- */
  --r-sm: 0.5rem;
  --r-md: 0.75rem;
  --r-lg: 1rem;
  --r-full: 999px;

  /* ---- type ---- */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs--1: 0.8125rem;
  --fs-0: 1rem;
  --fs-1: 1.125rem;
  --fs-2: 1.375rem;
  --fs-3: 1.875rem;
  --lh-tight: 1.25;
  --lh-body: 1.55;

  /* ---- colour: light (default) ----
   *
   * --text on --surface is 17.4:1 and on --bg is 16.1:1 -- both nowhere near
   * the 4.5:1 floor, which leaves headroom to keep --text a near-black rather
   * than a pure one.
   *
   * --muted is the one built to a budget rather than to taste: #5f5d57 is the
   * darkest warm gray that still reads as "muted" against #6b6b66 (the old
   * value, which was never checked) while clearing 4.5:1 on both --surface
   * (6.58:1) and --bg (6.09:1). A lighter muted would drift under the floor
   * on --bg specifically, since --bg is the darker of the two.
   *
   * --accent is deepened from the old #b8563a to #a8462d specifically so
   * white text on it (--accent-text, used on .btn.primary) clears 4.5:1
   * (measured 5.87:1) -- the old value sat closer to 4:1 and failed for small
   * button labels. The same #a8462d against --surface is 5.87:1, past the
   * 3:1 floor for the large-text/UI-border uses (the step rail's active dot,
   * the SAS "these differ" note's accent underline).
   */
  --bg: #f7f6f3;
  --surface: #ffffff;
  --surface-raised: #f1efe9;
  --text: #1a1a19;
  --muted: #5f5d57;
  --line: #e3e1db;
  --line-strong: #8f8d85;
  --accent: #a8462d;
  --accent-hover: #8f3a24;
  --accent-text: #ffffff;
  --accent-soft: rgba(168, 70, 45, 0.12);
  --ok: #1f6e46;
  --ok-soft: rgba(31, 110, 70, 0.12);
  --bad: #a33328;
  --bad-soft: rgba(163, 51, 40, 0.12);
  --warn: #8a5a00;
  --warn-soft: rgba(138, 90, 0, 0.12);

  /* ---- elevation ---- */
  --shadow-1: 0 1px 2px rgba(20, 18, 14, 0.06), 0 1px 1px rgba(20, 18, 14, 0.04);
  --shadow-2: 0 8px 24px rgba(20, 18, 14, 0.10), 0 2px 6px rgba(20, 18, 14, 0.06);

  /* ---- focus ---- */
  --focus-ring: 0 0 0 3px rgba(168, 70, 45, 0.35);
}

@media (prefers-color-scheme: dark) {
  :root {
    /*
     * Every pair below is re-measured against the dark surfaces, not just
     * colour-inverted -- a light-mode ratio says nothing about the same hex
     * pair on a dark background. --muted lightens to #b1b0aa (7.55:1 on
     * --surface, 8.30:1 on --bg); --accent lightens to #e08662 so
     * --accent-text (now dark, #17171a, matching the old scheme of a dark
     * label on a light-ish accent chip) still clears 4.5:1 (6.61:1 measured).
     */
    --bg: #16161a;
    --surface: #1f1f24;
    --surface-raised: #262630;
    --text: #ecebe8;
    --muted: #b1b0aa;
    --line: #33333a;
    --line-strong: #77747c;
    --accent: #e08662;
    --accent-hover: #e89a7c;
    --accent-text: #17171a;
    --accent-soft: rgba(224, 134, 98, 0.18);
    --ok: #7fc39b;
    --ok-soft: rgba(127, 195, 155, 0.16);
    --bad: #f0968a;
    --bad-soft: rgba(240, 150, 138, 0.16);
    --warn: #e3b34d;
    --warn-soft: rgba(227, 179, 77, 0.16);

    /*
     * Black shadows read as mud on a dark surface -- there is no darker tone
     * for them to imply depth against. Elevation here leans on --line-strong
     * borders (already applied by .card etc. in both themes) plus these
     * faint, mostly-flat shadows instead of the pronounced light-mode ones.
     */
    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.2);
    --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.35);

    --focus-ring: 0 0 0 3px rgba(224, 134, 98, 0.45);
  }
}
/**
 * Page chrome only -- the h1, tagline, and footer disclosure that stay in the
 * light DOM (see site/index.html). Everything that used to style the
 * transfer UI itself (sections, buttons, the QR box, the SAS display, the
 * progress bar, and so on) moved into <qr-drop>'s own shadow root in
 * src/web/element.js, because shadow DOM does not inherit a page stylesheet
 * and the component needs to look right with none of this loaded at all.
 *
 * The design tokens this file reads (--bg, --surface, --sp-*, --fs-*, ...)
 * used to be a `:root { ... }` block pasted here verbatim from the `:host`
 * block in src/web/element.js's TEMPLATE -- two copies of the same list that
 * could only drift apart, never be checked against each other. They are
 * generated instead: scripts/build-site.mjs prepends `tokensCSS(':root')`
 * (src/web/tokens.js) to this file's contents when it writes
 * site/dist/styles.css, so this stylesheet only ever consumes tokens, never
 * redefines them. Do not add a `:root` block back here -- add the token to
 * tokens.js, where both this page and the component pick it up from.
 */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-0)/var(--lh-body) var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

main {
  max-width: 34rem;
  margin: 0 auto;
  padding: var(--sp-7) var(--sp-4) var(--sp-7);
}

header { margin-bottom: var(--sp-6); }

h1 {
  margin: 0;
  font-size: var(--fs-2);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
}

.tagline {
  margin: var(--sp-2) 0 0;
  color: var(--muted);
  font-size: var(--fs--1);
}

qr-drop { display: block; }

footer { margin-top: var(--sp-5); }
footer summary {
  cursor: pointer;
  color: var(--muted);
  font-size: var(--fs--1);
}
footer ul { padding-left: 1.1rem; color: var(--muted); font-size: var(--fs--1); }
footer li { margin-bottom: var(--sp-2); }
footer strong { color: var(--text); font-weight: 600; }

@media (max-width: 30rem) {
  main { padding: var(--sp-5) var(--sp-3) var(--sp-6); }
}