/* ====================================================================
   THE APP'S THEME, EXTENDED FOR THE FRONT END

   The public site wears the app's clothes. Everything it needs for
   color, ink, lines and radii already exists in theme.css, the one
   theme the app ships, so this file adds only what the admin area has
   no use for: a page band, a hero wash, a reading measure, a gutter,
   a header height.

   Every value is derived from the app's tokens rather than written
   out, so the front end moves when the app's theme moves.

   Same --tt- prefix on purpose: this is not a second theme, it is the
   same theme with a few more rooms.
   ==================================================================== */
:root {
  /* the alternating section band: the same white the app uses for
     its side column, so a section change reads as a change of paper,
     not as a card */
  --tt-band:      var(--tt-paper);

  /* the hero wash: the accent wash, pulled most of the way back to
     the page, so the top of the page is tinted rather than coloured */
  --tt-hero:      color-mix(in srgb, var(--tt-accentwash) 62%, var(--tt-page));

  /* the highlight behind a phrase, and the rule under a lead line */
  --tt-mark:      var(--tt-accentwash);

  /* measure and rhythm */
  --tt-measure:   62ch;          /* the app's own reading width */
  --tt-gut:       clamp(14px, 4vw, 26px);
  --tt-headh:     54px;          /* the height of the reader header */
  --tt-sec:       clamp(46px, 7vw, 76px);
}