/* ═══════════════════════════════════════════════════════════════════════════
   FAMILY — HOSPITALITY
   Suburban and market-town parishes · retreats · weddings · women's and
   family ministry · anywhere the church's public face is its welcome.

   The fifth family, and the first one whose brief came from OUTSIDE the church
   sector. The reference is an events-and-retreats studio: a centred serif
   wordmark over a hairline, a hero split down the middle between a painted
   panel and a photograph, and — the part that actually matters — a page whose
   GROUND TONE CHANGES from section to section.

   That last one is the point. The first four families each held a single paper
   colour the whole way down, which is why three well-differentiated
   architectures still read as three variations of one restrained thing. A page
   that alternates white → oat → blush → evening has a rhythm the eye can feel
   before it reads a word, and it costs nothing but discipline.

   THE REGISTER: quiet editorial. Big Caslon at one weight, photography at real
   scale, hairline rules doing the dividing, and no card, shadow, radius or
   gradient anywhere. Warmth comes from the two tinted grounds and from the
   pictures — never from an effect.

   THE CHROME LIVES IN families/_chrome-editorial.css, which this family loads
   before itself. What is in THIS file is only what makes Lantern Lantern:
   pure white with oat and blush against an evening blue, Libre Caslon Display
   over Libre Franklin, and a type scale that runs large.
   ═══════════════════════════════════════════════════════════════════════════ */

/* BOTH selectors are required, and the second is not decoration.
   tokens.css declares a `:root[data-theme="light"]` block, which at (0,2,0)
   outranks a plain `:root` here — so the moment a visitor presses the theme
   toggle to "light", every token below silently reverts to the Liturgical
   family's plaster-and-lead palette and this template renders as Cornerstone
   in a Caslon. It is invisible under the OS default, because no data-theme
   attribute is set at all until somebody chooses. civic.css, plain.css and
   movement.css each carry the same counter-declaration for the same reason. */
:root,
:root[data-theme="light"] {
  /* ── Type ───────────────────────────────────────────────────────────────
     Libre Caslon Display for everything that is meant to be looked at, at ONE
     weight, because that is how a display Caslon is drawn. Libre Franklin
     carries the reading text and the interface — a plain grotesque under a
     high-contrast serif is the whole pairing, and it keeps this family off
     Public Sans, which Civic and Movement already use. */
  --font-display: "Libre Caslon Display", "Libre Caslon Text", Georgia, serif;
  --font-body:    "Libre Franklin", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;
  --font-ui:      "Libre Franklin", ui-sans-serif, -apple-system, "Segoe UI", sans-serif;

  /* ── Ground ─────────────────────────────────────────────────────────────
     PURE WHITE, alone among the five families. Cornerstone is on plaster,
     Plainsong on wove paper, Threshold on newsprint, Commons on institutional
     grey-green — all of them tinted, none of them white. White is what makes
     the two warm tints below read as tints rather than as another paper. */
  --white:     #FFFFFF;
  --oat-100:   #F7F3EC;
  --oat-200:   #EFE8DC;   /* first tinted ground   */
  --oat-300:   #E2D8C6;
  --blush-200: #F5E9E3;   /* second tinted ground  */
  --blush-300: #E9D6CC;
  --stone-500: #8A8078;
  --stone-600: #6B625B;
  --stone-800: #2E2A27;
  --stone-900: #1B1917;

  /* ── The evening panel ──────────────────────────────────────────────────
     A deep blue-green the colour of dusk through glass. It is the one COOL
     note in a warm family, and that warm/cool tension is what stops the page
     going sepia. Measurably its own hue: the other four families' grounds and
     accents sit at ~264° (violet stone), ~60° (bleached paper), ~40°
     (newsprint), ~120° (enamel green) — this is ~197°, claimed by nobody. */
  --evening:   #1F3D4A;
  --evening-2: #2C5464;

  /* Lamplight: the warm pale the panel's own button is painted in, and the
     only place a second colour appears. A lantern is warm light inside a blue
     evening, which is the whole idea the template is named for. */
  --lamp:      #DFD1B6;

  /* Opt out of the chrome's default deep-band button (reversed paper) and use
     lamplight instead. Declared HERE rather than in the chrome, because --lamp
     is this family's paint name and no other family has one. */
  --deep-accent:    var(--lamp);
  --deep-accent-fg: #23201A;
  --lamp-fg:        #23201A;
  --lamp-hover:     #EDE2CB;

  /* The two tints the register alternates between. */
  --tint-1:        var(--oat-200);
  --tint-1-raised: var(--oat-100);
  --tint-1-sunken: var(--oat-300);
  --tint-1-line:   var(--oat-300);
  --tint-2:        var(--blush-200);
  --tint-2-raised: #FBF4F1;
  --tint-2-sunken: var(--blush-300);
  --tint-2-line:   var(--blush-300);

  --bg:          var(--white);
  --bg-raised:   var(--white);
  --bg-sunken:   var(--oat-200);
  --fg:          var(--stone-900);
  --fg-muted:    var(--stone-600);
  --line:        var(--oat-300);
  --line-strong: var(--stone-800);

  --bg-invert:    var(--evening);
  --fg-invert:    #F4EFE6;
  --line-invert:  #3A5D6C;
  --muted-invert: #B9CBD3;

  --accent:      var(--evening);
  --accent-fg:   #FFFFFF;

  /* ── Scale ──────────────────────────────────────────────────────────────
     Display sizes run BIG — the reference sets its section headings at 60px
     and its hero at 72px, and that generosity is most of why it reads as
     designed rather than assembled. Body text stays modest so the contrast
     between the two is the thing you notice. */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1rem;
  --t-md:   1.125rem;
  --t-lg:   clamp(1.3rem,  1.05rem + 1vw,   1.6rem);
  --t-xl:   clamp(1.75rem, 1.3rem + 2vw,    2.6rem);
  --t-2xl:  clamp(2.2rem,  1.5rem + 3.4vw,  3.75rem);
  --t-3xl:  clamp(2.7rem,  1.6rem + 5vw,    4.5rem);

  --leading-tight: 1.02;   /* display Caslon sets tight; 1.12 leaves it airy */
  --leading-snug:  1.3;
  --leading-body:  1.68;

  --tracking-label: 0.15em;
  --tracking-display: -0.025em;

  --measure:      34rem;
  --measure-wide: 46rem;
  --court:        76rem;
  --gutter:       clamp(1.25rem, 5vw, 4rem);

  /* Nothing here is rounded and nothing casts a shadow. The reference gets its
     whole structure from hairlines and painted blocks, and a single 8px radius
     would undo it. */
  --radius:      0;
  --radius-arch: 0;
  --shadow:      none;

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

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

/* ── Dark ─────────────────────────────────────────────────────────────────
   Not an inversion. The page goes to the inside of the evening panel and the
   two tints become the deeper and shallower ends of that same blue, so the
   alternation survives — a dark theme that flattens every band to one charcoal
   throws away the only structural idea this family has.

   ⚠ EACH BLOCK MUST RESTATE THE SEMANTIC MAPPING, not just the palette.
   `--bg: var(--white)` is declared up in the light block at `:root`, which is
   (0,1,0). tokens.css declares `:root[data-theme="dark"] { --bg: … }` at
   (0,2,0), so under a dark theme ITS mapping wins and the page renders on
   Liturgical's lead-grey however carefully the palette above is redefined.
   Redefining --white alone changes nothing, because nothing is reading it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --white:     #141B1F;
    --oat-100:   #182126;
    --oat-200:   #1B262C;
    --oat-300:   #2E4049;
    --blush-200: #221F26;
    --blush-300: #3A3340;
    --stone-500: #8A9AA1;
    --stone-600: #A3B3BA;
    --stone-800: #D6DEE2;
    --stone-900: #EDF2F4;

    --evening:   #7FB3C6;
    --evening-2: #A6CBD9;
    --lamp:      #E4D5B4;

    --bg:          var(--white);
    --bg-raised:   var(--oat-100);
    --bg-sunken:   var(--oat-200);
    --fg:          var(--stone-900);
    --fg-muted:    var(--stone-600);
    --accent:      var(--evening);

    --bg-invert:    #0E1417;
    --fg-invert:    #EDF2F4;
    --line-invert:  #2B3A42;
    --muted-invert: #9FB2BA;

    --accent-fg: #0E1417;
    --line:        #2C3A41;
    --line-strong: #56676F;
    --shadow:      none;
  }
}
:root[data-theme="dark"] {
  --white:     #141B1F;
  --oat-100:   #182126;
  --oat-200:   #1B262C;
  --oat-300:   #2E4049;
  --blush-200: #221F26;
  --blush-300: #3A3340;
  --stone-500: #8A9AA1;
  --stone-600: #A3B3BA;
  --stone-800: #D6DEE2;
  --stone-900: #EDF2F4;

  --evening:   #7FB3C6;
  --evening-2: #A6CBD9;
  --lamp:      #E4D5B4;

  --bg:          var(--white);
  --bg-raised:   var(--oat-100);
  --bg-sunken:   var(--oat-200);
  --fg:          var(--stone-900);
  --fg-muted:    var(--stone-600);
  --accent:      var(--evening);

  --bg-invert:    #0E1417;
  --fg-invert:    #EDF2F4;
  --line-invert:  #2B3A42;
  --muted-invert: #9FB2BA;

  --accent-fg: #0E1417;
  --line:        #2C3A41;
  --line-strong: #56676F;
  --shadow:      none;
}