/*
 * theme.css — everything about the site that is this church's rather than the book's.
 *
 * ⚠ PART-WAY THROUGH ITS CHANGEOVER: the covers and the mark are this church's;
 * the palette below them, the two faces and the hover leaf are still the ones
 * this file was copied from.
 *
 * WHY IT IS ITS OWN FILE: a second church may one day wear this same book.
 * book.css is the book — pages, tabs, turning, layout — and reads every colour,
 * face and mark from the custom properties below. A new church's theme is a new
 * copy of this file; book.css does not change.
 *
 * THE NAMES ARE THE CONTRACT. book.css uses them by name, so a theme may change
 * any value here but must keep every name. The palette keeps its descriptive
 * names for now; a second theme is the moment to decide whether they become
 * role names. That moment came, and they did.
 *
 * LOADED BY: index.html, before book.css.
 */

:root {
  /* --- the palette: the church's blue ------------------------------------
     Each value keeps the SATURATION and LIGHTNESS of the green set this file
     was copied with, at the hue of the church's letterhead — the same hue the
     cover cloth uses. Keeping S and L is what preserves every contrast
     relationship the book was built against, so nothing needs re-tuning.
     ⛔ The names are roles now, not colours. They were olive and sage, which
     described a value rather than a job and would have lied the moment the
     value changed. */
  --accent:       #004b80;   /* the church's colour at full strength */
  --accent-deep:  #00365c;   /* darker: tab labels, headings, links */
  --accent-light: #83a9c5;   /* soft: rules, tab faces */
  --accent-mid:   #6a93b0;
  --accent-pale:  #d8e4ed;

  --paper:      #fbf9f3;
  --paper-deep: #f2eee2;
  --paper-edge: #e3dfd0;
  --ink:        #2f2f2a;
  --ink-soft:   #5f5f55;
  --desk:       #e9e6dc;

  /* --- the church's own blues, off its logo and its letterhead -------------
     Used by the Give button for now. The palette above is still the green this
     file was copied with; pointing the rest of the site at these three is the
     changeover, and it is three values rather than a new mechanism. */
  --blue:       #2da9df;   /* the water and the ring in the mark */
  --blue-deep:  #0070c0;   /* the letterhead */
  --blue-dark:  #005795;   /* deeper again, for a focus ring that is visible on both */

  /* --- the church's colour on a primary action button ----------------------
     One gradient, shared by three: the header's Give, the Give page's button,
     and the Help assistant's Send. They are named for what they style rather
     than for one of the three, because the shared value is the reason changing
     one changes all of them. */
  --action-from:  var(--blue);
  --action-to:    var(--blue-deep);
  --action-focus: var(--blue-dark);

  /* --- type --------------------------------------------------------------- */
  --font-ui:   'Roboto', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', 'Times New Roman', serif;
  --font-cover: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-hand:  'Kalam', 'Segoe Print', 'Bradley Hand', cursive;   /* handwritten, unjoined letters */

  /* --- the binding: cloth boards and gilt tooling -------------------------
     The boards are the church's own colour turned into bookcloth: its hue kept
     exactly, at the saturation and lightness a cloth board reads as — 45% / 23%
     for the face, 50% / 13% for the shaded edge. Derived from the blue of the
     church's letterhead (#0070C0, hue 205). The logo's own blue is 7 degrees
     away and indistinguishable this dark, so either source lands here.
     ⛔ Change these two by moving the HUE and leaving S and L alone; they are
     what makes cloth look like cloth rather than like paint. */
  --cover-cloth:       #203e54;
  --cover-cloth-deep:  #112533;
  --gilt:              #c9b26b;
  --gilt-bright:       #ead9a0;

  /* --- theme.mark: the church's mark, gilt on the covers -------------------
     A cross with an angled cap over three river bands, inside a ring. A mask
     like the link icon, not a picture: the covers paint whatever is opaque here
     in gilt, and the softer pixels keep a little transparency, so it still
     reads as two tones in one colour.
     ⛔ ONLY THE ALPHA IS USED, so a replacement needs real OPAQUE pixels. A
     variant of this artwork exists whose every pixel is semi-transparent; it
     looks correct in an image viewer and renders as a washed-out ghost here. */
  --theme-mark: url('/images/logo-mark.png');

  /* --- theme.link.icon: the mark that grows in front of a link on hover ----
     An oak leaf, for Oak Park: deep sinuses, lobes reaching up and
     out, widest near the tip, the midrib cut through. Redrawn the same day
     when the bench's first leaf read as a fir. A mask, not a picture: book.css
     paints it in the link's own colour, so any single-colour SVG works. */
  --theme-link-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1C13.8 0.8 15.6 3 12.9 4.6C16.8 3.4 19.2 7.4 13.2 8.6C17.6 7.8 19.4 11.9 13.3 12.6C16.8 12.3 17.6 15.8 12.9 16.4C14.4 16.6 13.6 18.6 12.4 19L12.4 22.8L11.6 22.8L11.6 19C10.4 18.6 9.6 16.6 11.1 16.4C6.4 15.8 7.2 12.3 10.7 12.6C4.6 11.9 6.4 7.8 10.8 8.6C4.8 7.4 7.2 3.4 11.1 4.6C8.4 3 10.2 0.8 12 1Z M11.8 2.6L12.2 2.6L12.2 19L11.8 19Z'/%3E%3C/svg%3E");
}