/* 01-base.css. The type scale, the palette, and the bare elements: body, headings,
   links, tables, inputs, buttons, main. Nothing here belongs to one screen. */

/* Plain, legible, and printable. The Monday entry pass happens on a desktop in
   the office; the read views get printed and carried into a Monday meeting. */
/* TYPE SCALE. One ratio, one place, so sizes relate to each other instead of
   being guessed per element.

   Eric asked for "minimum font size 14pt, 18pt is normal text". I first set the
   root to 18 POINTS, which is 24px, and then scaled everything else around that
   floor: body copy came out enormous, headings ended up barely larger than the
   paragraphs under them, and a Mass name in an entry row was nearly the size of
   the card's own title. His words for it: "you're married to some of those and
   scaled others based on my minimums ... some of these are too small and others
   are WAY TOO BIG."

   So: 18px is normal text and 14px is the floor, and everything between and
   above steps by roughly 1.2. Nothing here is set in a component; components use
   these tokens. --step-0 is body. Down is meta and labels, up is headings and
   figures. */
:root {
  --step--2: 0.78rem;   /* 14px, the floor: tile labels, chart ticks */
  --step--1: 0.87rem;   /* 15.5px: notes, captions, secondary lines */
  --step-0:  1rem;      /* 18px: body copy */
  --step-1:  1.25rem;   /* 22.5px: card titles */
  --step-2:  1.45rem;   /* 26px: page titles */
  --step-3:  2rem;      /* 36px: a figure that carries a card */
  --step-4:  2.2rem;    /* 40px: the one number a card is about */
}
html { font-size: 18px; }

:root {
  /* St. Edward parish palette. Every value below is measured, not eyeballed;
     the ratios are against parchment unless stated.

     Two of the parish colours cannot carry meaning and are chrome only:
     golden-sand is 1.50:1 and golden-bronze 2.02:1 against parchment, and the
     two sit only 8.5 apart in perceptual distance, under the 15 floor, so even
     full colour vision struggles to tell them apart. They rule, they divide,
     they never say anything. */
  --parchment:   #f4f1ea;   /* page ground */
  --ink:         #14202e;   /* body text, 14.59:1 */
  --navy:        #1f2c3f;   /* headings and the masthead, 12.49:1 */
  --emerald:     #004f2f;   /* actions and links, 8.62:1; white on it is 9.72:1 */
  --gold:        #c8a85a;   /* decorative rules only, never text */
  --gold-sand:   #d8c77a;   /* decorative only */

  --muted:       #556170;   /* secondary text, 5.59:1 */
  --line:        #ddd6c6;   /* card and table rules, warm to match parchment */
  --field:       #8a8578;   /* control borders: 3.68:1 on white, 3.26:1 on parchment */
  --ok:          #004f2f;   /* the emerald doubles as success */
  --warn:        #8c4a10;   /* 6.00:1 */
  --danger:      #96261c;

  /* Kept for the rules that still say --paper and --accent. */
  --paper:       #f4f1ea;
  --accent:      #004f2f;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  /* The size comes from the scale, not from this shorthand. A hardcoded 16px
     here quietly overrode the root, so every rem in the file was measured
     against one number while the scale was built around another, and the whole
     hierarchy stayed squashed no matter what the steps said. */
  font: var(--step-0)/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}
/* main sits beside the sidebar now, so its own centring is gone: the shell
   does the layout and main takes what is left. The 80vw it used to claim was
   measured against the whole window and would put the content off-centre
   inside a narrower column. */
main {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.75rem 2rem 4rem;
  max-width: 82rem;
}