/*
 * site/theme.css — the prayer-book look: every colour and font the site
 * uses, and the ultramarine backdrop.
 *
 * What it is for
 *   The builder is drawn like a page of a prayer book: sepia parchment
 *   with dark brown serif text, laid on an ultramarine backdrop that
 *   darkens softly toward the edges. The site header and footer sit on the
 *   blue in gold. This file holds those choices as CSS custom properties
 *   ("tokens") on :root, plus the few rules that paint the backdrop, so the
 *   whole look can be changed here without touching layout.
 *
 *   To change a colour, change its token below; every rule in styles.css
 *   that uses it follows. Keep the contrast notes true when you do (see
 *   "Do not break").
 *
 * Plan section
 *   "UI components (site/app/ui)", styling paragraph: "theme.css holds
 *   every colour and font token and the prayer-book look: sepia parchment
 *   pages with dark brown serif text (fonts already on the device), laid
 *   on an ultramarine backdrop that darkens toward the edges, with the
 *   header and footer in gold text on the blue … There is no dark mode for
 *   now."
 *
 * Depends on
 *   Nothing. Loaded by index.html BEFORE styles.css.
 *
 * Used by
 *   styles.css, which names colours and fonts only through these tokens.
 *
 * Do not break
 *   - Text contrast (WCAG AA asks at least 4.5:1 for body text; AAA 7:1).
 *     Measured for these values:
 *       --ink on --surface 12.6:1, on --page 11.1:1
 *       --muted on --surface 6.2:1, on --page 5.5:1, on --selected-bg 5.5:1
 *       --marian on --surface 9.0:1; --on-marian on --marian 9.3:1
 *       --danger on --surface 6.8:1; --on-danger on --danger 7.1:1
 *       --gold on --backdrop 6.1:1, on --backdrop-edge 10.5:1
 *       --badge-ink on --badge-bg 7.7:1
 *     Re-check any pair you change (any WCAG contrast checker will do).
 *   - No dark mode: the page is one light look. index.html declares
 *     color-scheme "light" so a phone in dark mode doesn't draw dark form
 *     controls on the sepia page. Adding a dark look later means a second
 *     set of these tokens, not changes in styles.css.
 *   - Fonts are ones already on the device; nothing is downloaded, so the
 *     page works offline once cached and never waits on a font server.
 */

/* ---------- Tokens ------------------------------------------------------- */
:root {
  /* The ultramarine backdrop behind the page: lighter in the middle,
     darker at the edges (see the gradient below). */
  --backdrop: #22379b; /* ultramarine, where the light falls */
  --backdrop-edge: #0b1449; /* the same blue, deep, at the edges */
  --gold: #e8c66b; /* header and footer text on the blue */

  /* The parchment page and what is printed on it. */
  --page: #efe4c9; /* the sepia page itself */
  --surface: #f9f2e0; /* cards and bars: a lighter leaf on the page */
  --page-edge: #c2aa7c; /* the page's own edge against the blue */
  --ink: #3a2817; /* main text: dark sepia brown */
  --muted: #6b5640; /* inherited values, secondary text */
  --line: #cdb88f; /* hairline borders and rules */
  --thread: #a98f64; /* the strand the beads hang on */

  /* Actions and beads take the backdrop's ultramarine, so the page and
     its frame belong together. */
  --marian: #21389a;
  --on-marian: #fbf6e8; /* text on --marian */

  /* Problems, the over-limit total and Delete: the red that prayer books
     print their rubrics in. */
  --danger: #9b2b17;
  --on-danger: #fbf6e8;

  --badge-bg: #dde2f2; /* "AI voice" badge: a pale wash of the blue */
  --badge-ink: #21389a;
  --selected-bg: #e4e4ee; /* a ticked card: the same wash, lighter */
  --shadow: rgba(30, 18, 6, 0.28); /* the page's and the selection bar's lift */

  /* Book serif for reading; it's the whole page's font, as in a printed
     book. Iowan Old Style ships with iPhones and Macs, Palatino Linotype
     and Book Antiqua with Windows; Georgia is the fallback almost
     everywhere. The sans-serif is only for the small "AI voice" badge,
     so it reads as a label rather than part of the text. */
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  color-scheme: light;
}

/* ---------- The backdrop ------------------------------------------------- */
/* The blue fills the window behind everything. body keeps a plain
   --backdrop-edge colour too, so the page is blue even before the
   gradient layer paints and past the end of a short page. */
body {
  background: var(--backdrop-edge);
}
/* Platform workaround (iOS Safari): `background-attachment: fixed`, the
   usual way to keep a gradient still while the page scrolls, is ignored
   on iPhones and iPads, which would stretch the gradient over the whole
   page height. A fixed layer behind the page does the same job everywhere.
   To tell whether it's still needed: put the gradient on body with
   background-attachment: fixed, remove this rule, and scroll a long
   playlist on an iPhone; if the light stays put, it's no longer needed.
   The ellipse is centred a little above the middle (50% 35%), where the
   builder's top bar and first cards sit, and fades to the deep blue at
   the farthest corner. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse farthest-corner at 50% 35%, var(--backdrop) 0%, var(--backdrop-edge) 100%);
  pointer-events: none;
}