/* ═══════════════════════════════════════════════════════════════════════════
   TOKENS — the whole design system's vocabulary.

   Every template reads from these. A family stylesheet (families/*.css) may
   override the type and neutral tokens; nothing else should.

   Colour comes from church materials — pigment, glass, gold leaf, lead came —
   not from a UI kit. There are no gradients in this system, anywhere.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── The liturgical five ────────────────────────────────────────────────
     Canonical colours of the Western church year. Verified against the
     Episcopal Church and USCCB guidance. These are the accent set; a
     non-liturgical template simply uses one of them as a static brand colour. */
  --lit-violet:  #5B3E7E;  /* Advent, Lent                      */
  --lit-sarum:   #2E4A7D;  /* Advent, where Sarum use is kept   */
  --lit-gold:    #74580E;  /* Christmas, Easter (white & gold)  */
  --lit-green:   #3D6647;  /* Ordinary Time, Epiphany           */
  --lit-oxblood: #93251F;  /* Holy Week, Pentecost, martyrs     */
  --lit-unbleached: #B8A98C; /* Lenten array, where used        */

  /* ── Neutrals ───────────────────────────────────────────────────────────
     Biased toward violet so they read as chosen rather than inherited.
     Named for what they are: limewashed plaster and the lead came of a window. */
  --plaster-100: #F6F5F8;
  --plaster-200: #EDEBF0;
  --plaster-300: #E1DEE6;
  --plaster-400: #C9C5D1;
  --lead-600:    #66626F;
  --lead-700:    #403C49;
  --lead-800:    #201D26;
  --lead-900:    #16141A;
  --ink:         #1C1A20;

  /* ── Semantic surface tokens (theme-aware; see below) ───────────────── */
  --bg:          var(--plaster-200);
  --bg-raised:   #FFFFFF;
  --bg-sunken:   var(--plaster-300);
  --fg:          var(--ink);
  --fg-muted:    var(--lead-600);
  --line:        var(--plaster-400);
  --line-strong: var(--lead-700);

  /* ── The inverted ground ────────────────────────────────────────────────
     A page that never changes ground reads as one long band however well it is
     set. These are the tokens a family uses to cut a section against the rest
     of the page — and each family picks its own values, because a black band
     is right for a broadside and wrong for a psalter. Naming them here is what
     lets the section variants be written once. */
  --bg-invert:     var(--lead-900);
  --fg-invert:     var(--plaster-100);
  --line-invert:   #3A3543;
  --muted-invert:  #A9A3B4;

  /* ── Accent ─────────────────────────────────────────────────────────────
     `--accent` is the single colour a template themes on. In liturgical
     templates liturgy.css rewrites it per season; elsewhere the family sets it. */
  --accent:      var(--lit-green);
  --accent-fg:   #FFFFFF;   /* text on an --accent ground */
  --accent-weak: color-mix(in srgb, var(--accent) 10%, var(--bg));

  /* ── Type ───────────────────────────────────────────────────────────────
     Families override --font-display and --font-body. --font-ui is Public Sans
     everywhere: labels, buttons, tabular data. */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "EB Garamond", Georgia, "Times New Roman", serif;
  --font-ui:      "Public Sans", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Modular scale, 1.25 (major third). Fluid where it earns it. */
  --t-xs:   0.78rem;
  --t-sm:   0.875rem;
  --t-base: 1.0625rem;
  --t-md:   1.2rem;
  --t-lg:   clamp(1.35rem, 1.1rem + 1vw,   1.65rem);
  --t-xl:   clamp(1.7rem,  1.3rem + 1.8vw, 2.3rem);
  --t-2xl:  clamp(2.1rem,  1.5rem + 2.8vw, 3.1rem);
  --t-3xl:  clamp(2.6rem,  1.7rem + 4.2vw, 4.4rem);

  --leading-tight: 1.12;
  --leading-snug:  1.34;
  --leading-body:  1.62;

  --tracking-label: 0.14em;

  /* ── Space — 4px base, named by use not by number ──────────────────── */
  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* ── Measure & page ─────────────────────────────────────────────────── */
  --measure:      36rem;   /* ~66 characters at --t-base */
  --measure-wide: 52rem;
  --page:         72rem;
  --gutter:       clamp(1.25rem, 5vw, 3rem);

  /* ── Form ───────────────────────────────────────────────────────────────
     Radii are near-zero by default: stained glass and letterpress have hard
     edges. --radius-arch is the one exception and it is a real arch, not a
     rounded corner — families opt into a Romanesque or Gothic profile. */
  --radius:       2px;
  --radius-arch:  50% 50% var(--radius) var(--radius) / 42% 42% 0 0;

  --border:       1px solid var(--line);
  --border-strong: 1px solid var(--line-strong);

  /* Shadow is used for elevation only, never for decoration. */
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);

  --focus: 2px solid var(--accent);
  --focus-offset: 3px;

  --transition: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark theme ─────────────────────────────────────────────────────────────
   Not an inversion. The ground becomes lead came and the liturgical colours
   are lifted to hold their hue against it; --accent-fg flips to near-black so
   text on a gold or green ground stays legible. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:          var(--lead-900);
    --bg-raised:   var(--lead-800);
    --bg-sunken:   #100E14;
    --fg:          #E7E4EC;
    --fg-muted:    #948FA0;
    --line:        #332E3C;
    --line-strong: #4B4456;

    --lit-violet:  #9A7BC4;
    --lit-sarum:   #6D8FCC;
    --lit-gold:    #D4A93A;
    --lit-green:   #6FA37C;
    --lit-oxblood: #D1584F;
    --lit-unbleached: #CBBB9C;

    --accent-fg:   #14121A;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
  }
}

:root[data-theme="dark"] {
  --bg:          var(--lead-900);
  --bg-raised:   var(--lead-800);
  --bg-sunken:   #100E14;
  --fg:          #E7E4EC;
  --fg-muted:    #948FA0;
  --line:        #332E3C;
  --line-strong: #4B4456;

  --lit-violet:  #9A7BC4;
  --lit-sarum:   #6D8FCC;
  --lit-gold:    #D4A93A;
  --lit-green:   #6FA37C;
  --lit-oxblood: #D1584F;
  --lit-unbleached: #CBBB9C;

  --accent-fg:   #14121A;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}

:root[data-theme="light"] {
  --bg:          var(--plaster-200);
  --bg-raised:   #FFFFFF;
  --bg-sunken:   var(--plaster-300);
  --fg:          var(--ink);
  --fg-muted:    var(--lead-600);
  --line:        var(--plaster-400);
  --line-strong: var(--lead-700);

  --lit-violet:  #5B3E7E;
  --lit-sarum:   #2E4A7D;
  --lit-gold:    #74580E;
  --lit-green:   #3D6647;
  --lit-oxblood: #93251F;
  --lit-unbleached: #B8A98C;

  --accent-fg:   #FFFFFF;
  --shadow: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
}