/* Live Happy Foundation — canonical design tokens.
   Values sampled from the foundation logo. Contrast ratios verified against
   WCAG 2.1 in tools/check_site.py.

   HARD RULES — accent colour is BACKGROUND-DEPENDENT:
     On LIGHT backgrounds (--cream, --warm-white, white): accent TEXT must be
       --teal-ink (4.76:1 on cream). --amber (1.72:1) and --teal (3.15:1) are
       fill/shape/rule only on light backgrounds — never text there.
     On --navy backgrounds: accent TEXT is --amber (8.90:1) — preferred for
       brand cues — or --teal (4.83:1), both permitted. --teal-ink is BANNED
       on navy (3.23:1, fails AA).
     Every amber text declaration MUST carry an inline "on-navy" marker
       comment (literally the words "on-navy" in parentheses) on the same
       line — tools/check_site.py's amber-text-marked check rejects
       unmarked amber text.
     --green is decorative only (2.56:1). Never text, on any background.
*/
:root {
  --navy:       #102039;  /* 15.38:1 on cream */
  --navy-soft:  #293F57;
  --amber:      #FDB127;
  --teal:       #149D95;
  --teal-ink:   #0F7C75;  /*  4.76:1 on cream */
  --green:      #79AB48;
  --slate:      #4A5568;  /*  7.10:1 on cream */
  --cream:      #FAF8F5;
  --warm-white: #FFFEFB;
  --stone:      #E8E4DE;
  --stone-dark: #D4CFC7;

  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans:  'Source Sans 3', -apple-system, sans-serif;
}

/* Brand lockup: mark + serif name. Used in header and footer on all pages. */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.brand-mark {
  height: 56px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.brand-name {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--navy);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.brand-name span { color: var(--teal-ink); }

footer .brand-mark { height: 40px; }
footer .brand-name { color: var(--navy); }
footer .brand-name span { color: var(--teal-ink); }

/* Interior-page footers sit on navy (--dark: var(--navy)); this modifier
   keeps the lockup legible there instead of navy-on-navy. */
.brand-lockup--on-navy .brand-name { color: var(--cream); }
.brand-lockup--on-navy .brand-name span { color: var(--amber); } /* on-navy */

.section-lead {
  font-family: var(--font-sans);
  /* Inherit color from the container instead of hardcoding one. This class
     is used on both light sections (inherits body text color) and the navy
     .difference section (inherits --color-cream, 15.38:1). A hardcoded
     --slate here is 2.17:1 on navy — illegible. Do NOT put slate back. */
  color: inherit;
  max-width: 60ch;
  margin: 0 auto 2.5rem;
  line-height: 1.7;
}

@media (max-width: 640px) {
  .brand-mark { height: 42px; }
  .brand-name { font-size: 1.25rem; white-space: normal; }
}