/* ── Shared Theme Token Graph ──
   Values that index.html and pay/index.html both need. They lived twice before
   this file existed, which is how the checkout page drifted away from the
   landing page; keep the two consumers reading from here. Tokens used by only
   one page stay in that page's own <style> block. */
:root {
  /* The scrollbar and any native control are painted by the browser, not by
   the token graph, so the UA needs telling which theme they belong to.
   Without this the scrollbar stayed light next to a dark page. */
  color-scheme: light;
  --bg-body: #fbfbfc;
  --bg-surface: #ffffff;
  --bg-surface-alt: #f3f3f4;
  --color-text-main: #121316;
  --color-text-muted: #4a4d54;
  --color-text-light: #737478;
  --border-color: #e5e7eb;
  /* Primary landing-page actions and small identity accents share the
   Nostos Forest in light mode. Generic hover/focus/selection chrome
   remains neutral through its own tokens below. */
  --primary-fill: #293e32;
  --on-primary: #ffffff;
  /* The keyboard ring is the app's own control scale, taken from its
   styles.css: a neutral slate rather than the brand ink. The rest of that
   scale (corner radius, motion curve) is landing-page only and lives in
   index.html. */
  --focus-ring: #6e7c90;
  --font-serif: "Newsreader", Georgia, serif;
  --font-sans:
    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg-body: #0d0e11;
  --bg-surface: #121318;
  --bg-surface-alt: #181a20;
  --color-text-main: #f0f1f4;
  --color-text-muted: #c4c7d0;
  --color-text-light: #8b909f;
  --border-color: #2a2d37;
  --primary-fill: #3a5d53;
  --on-primary: #f0f1f4;
  --focus-ring: #6e7c90;
}