/* Universal foundation, linked FIRST (before header.css and any page-specific stylesheet) by every
   page on the site: the four font weights/styles of Atkinson Hyperlegible Next, the light/dark theme
   variables every other stylesheet reads from, a box-sizing reset, and the plainest possible <body>
   rule.

   Deliberately NOT included here: a generic `a { color: ... }` rule. index.php and bible_full.php
   both rely on cross-referenced words (.auto-link) staying the browser's own default link color in
   light mode -- see index.php's own CSS comment on that rule for the full reasoning. A blanket `a`
   rule here would silently override that on every page. Pages that DO want all their plain links to
   read as --fg (the five simple info pages, encyclopedia_full.php) set that themselves, in their own
   stylesheet.

   Also deliberately NOT included: a `max-width` on body. index.php doesn't cap the body itself -- its
   two-column layout (.content + .plates-column, in css/index.css) caps only the reading column,
   letting illustrations use the rest of a wide window. Every other page just wants a plain single
   column, so each of their own stylesheets adds one line, `body { max-width: 900px; }`. */

@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('/fonts/AtkinsonHyperlegibleNext-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('/fonts/AtkinsonHyperlegibleNext-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('/fonts/AtkinsonHyperlegibleNext-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible Next';
    src: url('/fonts/AtkinsonHyperlegibleNext-BoldItalic.woff2') format('woff2');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

* { box-sizing: border-box; }

/* Light / dark skin. Everything on every page reads its colors from these names, so the whole site
   only needs to be taught the dark-mode values once, here. The pastel accent badges (edition labels,
   on/off pills, etc., in header.css) keep their own literal colors in both skins -- they already
   carry an explicit black text color, so they read fine on either background. */
:root,
:root[data-theme="light"] {
    --bg: #ffffff;
    --fg: #000000;
    --muted: #666666;
    --panel: #eeeeee;
    --panel2: #f2f2f2;
    --divider: #dddddd;
    --kjv-color: #8fe0d0;
    --bsb-color: #f2a5d6;
    color-scheme: light;
}
:root[data-theme="dark"] {
    --bg: #121212;
    --fg: #e8e8e8;
    --muted: #a8a8a8;
    --panel: #2a2a2a;
    --panel2: #262626;
    --divider: #3a3a3a;
    --kjv-color: #8fe0d0;
    --bsb-color: #f2a5d6;
    color-scheme: dark;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: 'Atkinson Hyperlegible Next', sans-serif;
    margin: 0;
    padding: 16px;
    line-height: 1.4;
}