/* Dark theme for the STATIC pages (landing / setup / support / faq / privacy /
   terms). Those pages predate the React app and use their own token names
   (--paper/--ink/--rule/--on) with hex values, rather than the HSL triplets in
   src/index.css. This file is the bridge: same colours, other vocabulary.
   Values are generated from the React tokens, so the two stay identical —
   see the .dark block in src/index.css if you change one.

   Include AFTER the page's own <style> is irrelevant: `html.dark` (0,1,1)
   outranks `:root` (0,1,0), so a page keeps its own light values untouched and
   this only wins when /theme.js has set the class.

       <link rel="stylesheet" href="/theme.css">
       <script src="/theme.js"></script>   (synchronous, in <head>) */

html.dark {
  --paper: #10100E;   /* ground */
  --card: #181816;    /* raised surface — a hair off the ground */
  --ink: #F8F6F2;     /* now the TEXT and keyline colour, not the dark one */
  --muted: #D9D5C9;
  --rule: #C2BCAE;
  --body: #E7E3DA;    /* landing's secondary prose, a step under --ink */

  /* Lifted so they don't go muddy on black, matching src/index.css. */
  --red: #F46852;
  --blue: #5EC0ED;
  --yellow: #FABD2E;

  /* --on is "text sitting ON a filled block". The fills are now light, so the
     text on them has to be the ground — the exact inverse of the paper theme,
     and the same flip --info-foreground makes in the React palette. */
  --on: #10100E;

  color-scheme: dark;
}

/* Both are page-level colours the static pages set on <body> directly, so the
   token change alone wouldn't reach them. */
html.dark body {
  background: var(--paper);
  color: var(--ink);
}

/* The static pages have no focus or selection styling of their own either, so
   without this they fall back to the browser's system blue. Mirrors the rules
   in src/index.css. */
:focus-visible {
  outline: 2px solid var(--red, #E5392B);
  outline-offset: 1px;
}

::selection {
  background: var(--ink, #1A1A17);
  color: var(--paper, #EAE7DE);
}