/* The tokens both halves of the site share. The verse reader (index.css)
   and the library and words pages (reader.css) load this sheet first and
   then their own. Until 2026-09-19 each of those carried its own copy of
   these names, and the copies had drifted: the same --line was one grey on
   one side and another on the other. One block, one value, both sides.

   Theme. The page keeps a choice and stamps it on <html> as data-theme.
   Three states, so three rules: the media query answers "follow the
   system", the attribute rule answers "dark whatever the system says", and
   the guard on the media query is what lets an explicit choice of light
   survive a dark system. A sheet loaded after this one adds tokens of its
   own under the same selectors; it does not restate these.

   --ctl is the height of a header control, and the same number on both
   halves on purpose: it came to be 31px on one side and 44px on the other,
   which is a difference you see the moment you cross between them. 44
   because that is the smallest comfortable touch target. */
:root{
  --bg:#faf9f7;
  --panel:#ffffff;
  --ink:#1b1a18;
  --ink2:#55514b;
  --ink3:#8a847c;
  --line:#e3ded6;
  --line2:#efebe4;
  --accent:#8a5a2b;
  --accent-bg:#f6ecdf;
  --heb:"SBL Hebrew","Ezra SIL","Times New Roman",serif;
  --ctl:44px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#16151a;
    --panel:#1e1d23;
    --ink:#c8c5ce;
    --ink2:#a8a4b2;
    --ink3:#7b7788;
    --line:#33313c;
    --line2:#282730;
    --accent:#d9a066;
    --accent-bg:#2c2620;
  }
}
html[data-theme="dark"]{
  --bg:#16151a;
  --panel:#1e1d23;
  --ink:#c8c5ce;
  --ink2:#a8a4b2;
  --ink3:#7b7788;
  --line:#33313c;
  --line2:#282730;
  --accent:#d9a066;
  --accent-bg:#2c2620;
}

*{box-sizing:border-box}