@font-face { font-family: "Besorah Title"; font-weight: 100 900; font-display: swap; src: url("fonts/besorah-title.woff2") format("woff2"); }
@font-face { font-family: "Besorah Wordmark"; font-weight: 100 900; font-display: swap; src: url("fonts/besorah-title.woff2") format("woff2"); }
/* Bundled fonts (offline-first), cached by the service worker. Alegreya
   (variable, 400–900) carries BOTH English and Greek — one face, so Latin and
   polytonic Greek share a single type colour; the Greek subset is a separate
   unicode-range so it's only fetched when Greek is on screen. Shofar (Culmus)
   for Hebrew — GPL-2 with the font-embedding exception (fonts/shofar-LICENSE.txt). */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-greek-wght-normal.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-greek-wght-italic.woff2") format("woff2");
  unicode-range: U+0370-03FF;
}
/* Greek Extended = polytonic accents (breathings, iota subscript) the
   Septuagint and Greek NT use throughout. */
@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-greek-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: "Alegreya";
  font-style: italic;
  font-weight: 400 900;
  font-display: swap;
  src: url("fonts/alegreya-greek-ext-wght-italic.woff2") format("woff2");
  unicode-range: U+1F00-1FFF;
}
/* Shofar ships two real weights; split the slider's 300–800 range across them
   so no requested weight falls in a synthetic gap. */
@font-face {
  font-family: "Shofar";
  font-weight: 300 500;
  font-display: swap;
  src: url("fonts/shofar-hebrew-400.woff2") format("woff2");
}
@font-face {
  font-family: "Shofar";
  font-weight: 501 800;
  font-display: swap;
  src: url("fonts/shofar-hebrew-600.woff2") format("woff2");
}
/* Cormorant Garamond — a high-contrast Garamond display face, used ONLY for Latin
   headings (titling sizes), distinct from the Alegreya body. Latin subset only;
   Hebrew/Greek headings stay on Shofar/Alegreya. OFL-1.1 (fonts/cormorant-LICENSE.txt). */
@font-face {
  font-family: "Cormorant";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/cormorant-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2122, U+2212;
}

/* Typography simplified to Dark/Light. */
:root {
  --serif: "Alegreya", "Palatino Linotype", Palatino, "Times New Roman", Georgia, serif;
  --hebrew: "Shofar", "Frank Ruehl CLM", "David Libre", "Times New Roman", serif;
  /* Display face for Latin headings (titling). Falls back to the body serif. */
  --display: "Cormorant", "Cormorant Garamond", "Palatino Linotype", var(--serif);
  --read-size: 1.25rem;

  /* Shared foil flourish (the divider motif) as a mask shape — paint it by setting
     background-color (usually var(--foil-ink)) and masking with this. Used by empty
     states, the home portion teaser and the foot of the book index. */
  --ornament: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%2018'%3E%3Cg%20fill='none'%20stroke='%23000'%20stroke-width='1.6'%20stroke-linecap='round'%3E%3Cline%20x1='14'%20y1='9'%20x2='58'%20y2='9'/%3E%3Cline%20x1='102'%20y1='9'%20x2='146'%20y2='9'/%3E%3Cpath%20d='M58%209%20C65%203%2073%203%2076%209%20C73%2015%2065%2015%2058%209%20Z'/%3E%3Cpath%20d='M102%209%20C95%203%2087%203%2084%209%20C87%2015%2095%2015%20102%209%20Z'/%3E%3C/g%3E%3Cpath%20d='M80%203%20L85%209%20L80%2015%20L75%209%20Z'%20fill='%23000'/%3E%3Ccircle%20cx='68'%20cy='9'%20r='1.6'%20fill='%23000'/%3E%3Ccircle%20cx='92'%20cy='9'%20r='1.6'%20fill='%23000'/%3E%3C/svg%3E");

  /* Gold foil permeates every theme (cover lettering, ornaments). --foil is the
     bright leaf used ON leather (covers, the portion band); --foil-ink is the
     on-page variant — same bright gold in dark, a deeper antique gold in light so
     ornaments (divider, this-week teaser) keep contrast against the cream base. */
  --foil: #e7c66b;
  --foil-ink: var(--foil);
  --on-accent: #fff; /* text on an --accent fill; dark on gold/emerald (see accents) */

  /* Cover leathers: first-paint defaults (= the blue theme's pair); each accent
     below overrides them with its own hand-picked pairing. */
  --leather-tanakh: linear-gradient(165deg, #22397e 0%, #0c1838 100%);
  --leather-nt:     linear-gradient(165deg, #6f2018 0%, #2c0c08 100%);
}

/* ───────────────────────── tinted surfaces ─────────────────────────
   Each surface mixes a little --accent into a neutral base, so the whole app
   takes on the accent colour (not just the buttons). Switching accent re-tints
   everything because these reference var(--accent). */
[data-theme="dark"] {
  --base: #0a0d12;
  --bg: color-mix(in srgb, var(--accent) 13%, var(--base));
  --ink: color-mix(in srgb, var(--accent) 10%, #e9eef6);
  --chrome: color-mix(in srgb, var(--accent) 18%, var(--base));
  --card: color-mix(in srgb, var(--accent) 20%, var(--base));
  --hover: color-mix(in srgb, var(--accent) 30%, var(--base));
  --rule: color-mix(in srgb, var(--accent) 34%, var(--base));
  --accent-ink: color-mix(in srgb, var(--accent), white 40%);
}
[data-theme="dark"] body {
  background-image:
    radial-gradient(
      color-mix(in srgb, var(--accent) 25%, var(--base)),
      var(--bg)
    )
  ;
}
[data-theme="dark"] body .t.he,
[data-theme="dark"] body .t.en,
[data-theme="dark"] body .t.grc {
  text-shadow: var(--base) 1px 1px 0;
}
[data-theme="light"] {
  --base: #f3eddf;
  --bg: color-mix(in srgb, var(--accent) 9%, var(--base));
  --ink: color-mix(in srgb, var(--accent) 14%, #1b222d);
  --chrome: color-mix(in srgb, var(--accent) 6%, #fffdf8);
  --card: color-mix(in srgb, var(--accent) 4%, #fffdf8);
  --hover: color-mix(in srgb, var(--accent) 15%, var(--base));
  --rule: color-mix(in srgb, var(--accent) 26%, var(--base));
  --accent-ink: color-mix(in srgb, var(--accent), black 22%);
  --foil-ink: #8a6d1e; /* deeper gold so on-page ornaments read on the cream base */
}
[data-theme="light"] body {
  /* Warm parchment: a smooth golden glow (top) and a faint accent wash (bottom)
     over an organic paper tooth — SVG fractal noise, tiled, so there are no 1px
     stripes to alias into the jagged moiré the laid-fibre version produced. */
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='180'%20height='180'%3E%3Cfilter%20id='p'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.9'%20numOctaves='2'%20stitchTiles='stitch'/%3E%3CfeColorMatrix%20type='saturate'%20values='0'/%3E%3C/filter%3E%3Crect%20width='180'%20height='180'%20filter='url(%23p)'%20opacity='0.05'/%3E%3C/svg%3E"),
    radial-gradient(125% 95% at 50% -10%, color-mix(in srgb, var(--foil) 20%, transparent), transparent 56%),
    radial-gradient(90% 72% at 50% 115%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%),
    radial-gradient(
      var(--bg),
      color-mix(in srgb, var(--accent) 24%, var(--base))
    );
  background-repeat: repeat, no-repeat, no-repeat, no-repeat;
  background-size: 180px 180px, auto, auto, auto;
}

/* ───────────────────────── accents ─────────────────────────
   Just the hue now; surfaces above derive from it. Cool blue and gold are the
   keystones; emerald, royal red and purple added.

   Each accent also names a hand-picked pair of cover leathers (--leather-tanakh
   / --leather-nt) — deliberate, rich colours chosen to complement that theme and
   each other, NOT mechanically tinted by --accent (which went jaundiced/sickly).
   The Tanakh leans cool, the New Testament warm; one of the pair echoes the
   theme hue and the other complements it. */
[data-accent="blue"] {
  --accent: #197de1;
  --leather-tanakh: linear-gradient(165deg, #22397e 0%, #0c1838 100%); /* sapphire navy */
  --leather-nt:     linear-gradient(165deg, #6f2018 0%, #2c0c08 100%); /* oxblood red */
}
[data-accent="gold"] {
  --accent: #e4a125;
  --on-accent: #1a1200; /* white on gold/emerald fails AA */
  --leather-tanakh: linear-gradient(165deg, #5f3b1d 0%, #271305 100%); /* cognac brown */
  --leather-nt:     linear-gradient(165deg, #1f4a33 0%, #0a1f14 100%); /* forest green */
}
[data-accent="emerald"] {
  --accent: #169c62;
  --on-accent: #03140b;
  --leather-tanakh: linear-gradient(165deg, #1d4a33 0%, #08200f 100%); /* emerald green */
  --leather-nt:     linear-gradient(165deg, #6f2018 0%, #2c0c08 100%); /* oxblood burgundy */
}
[data-accent="royal"] {
  --accent: #db243c;
  --leather-tanakh: linear-gradient(165deg, #22397e 0%, #0c1734 100%); /* navy (complement) */
  --leather-nt:     linear-gradient(165deg, #7e211b 0%, #2e0a08 100%); /* crimson (theme) */
}
[data-accent="purple"] {
  --accent: #8754d4;
  --leather-tanakh: linear-gradient(165deg, #48265f 0%, #190a26 100%); /* aubergine plum */
  --leather-nt:     linear-gradient(165deg, #1c4a48 0%, #08211f 100%); /* deep teal */
}

/* Gold is too light for small text at the generic 22% darkening on cream. */
[data-theme="light"][data-accent="gold"] { --accent-ink: color-mix(in srgb, var(--accent), black 52%); }