/* EGE design tokens. Single source of truth. See PHASE-3-PLAN.md section 3.

   PALETTE AUTHORITY CHANGED 2026-08-28. These are the client's own approved swatch values,
   supplied as a colour palette image with one colour crossed out. They supersede the values
   read off her vector logo. Her words: "The website does not need to be limited to colors
   appearing directly in the logo."

   Four earlier analyses concluded the teal and sage in her written guide appeared nowhere in
   her logo, and this file previously said to prefer the logo greens. She reopened that herself
   and decided. Do not re-litigate it from the logo evidence again.

   #90ff8f is crossed out in red on her swatch. It must not appear anywhere.

   Every ratio below is measured, not estimated. AA needs 4.5:1 for body text and 3:1 for
   large text. Ratios are given against the ground each colour is actually used on. */
:root{
  /* ---- Typography. Split settled by the client 2026-08-28. ----
     Serif for large display headings only. Montserrat for everything else: body, smaller
     headings, navigation, buttons, labels, forms, captions, statistics, footer. Her words:
     "There is no need to remove the serif headings or re-typeset all 25 pages." */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Montserrat", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --wt-display: 700;
  --wt-sub:     600;
  --wt-body:    400;

  /* ---- Greens. Body text safe on ivory and white. ---- */
  --forest:     #004738;  /* primary.   10.63:1 on ivory, 10.72:1 on white. AAA */
  --green-deep: #023b1b;  /* 12.66:1 on ivory. AAA. Large grounds */
  --green-dark: #012216;  /* 16.76:1 on ivory. AAA. Deepest ground */
  --green-mid:  #226e2b;  /* 6.24:1 on ivory. AA for body text */

  /* ---- Greens and teals for fills, panels and type on dark only. ---- */
  --leaf:       #5cb431;  /* 2.59:1 on ivory FAILS. Graphic and icon only */
  --green-lt:   #9ed28c;  /* 1.73:1 on ivory FAILS. 6.15:1 on forest, AA there */
  --sage-green: #7cb58a;  /* 2.36:1 on ivory FAILS. 4.51:1 on forest, AA there */
  --sage:       #87b9ae;  /* 2.17:1 on ivory FAILS. 4.89:1 on forest, AA there */
  /* 4.89 clears 4.5 with almost no margin, and every place --sage is used as type sits
     at 12px or under, where that margin matters. This is the same hue lightened until it
     has real headroom: 5.48:1 on forest. Use it for TYPE on forest, keep --sage for
     graphics and borders. */
  --sage-type:  #97c2b9;  /* 5.48:1 on forest */
  --teal-pale:  #d4e9e7;  /* panel ground on light. 8.48:1 as type on forest */
  --teal-tint:  #f3fffe;  /* near-white ground. 10.49:1 as type on forest */

  /* ---- Teal. Her main addition, and it is strong enough for type. ---- */
  --teal:       #137176;  /* 5.70:1 on ivory, 5.75:1 on white. AA for body text */
  --teal-mid:   #4f8277;  /* 4.34:1 on ivory. LARGE TEXT ONLY, just under AA */

  /* ---- Neutrals ---- */
  --ivory:      #fffff0;  /* replaces the old cream. Alternating band ground */
  --paper:      #fffff0;  /* alias kept so existing rules keep working */
  --paper-2:    #d4e9e7;  /* second band is now a teal tint, not a darker cream */
  --ink:        #383838;  /* her charcoal. 11.62:1 on ivory, 11.73:1 on white. AAA */
  /* Secondary body copy. Her #4f8277 was used here first and FAILED at 4.34:1: nearly every
     paragraph and small label on the site takes --muted, so it has to clear 4.5:1 for body
     text, not 3:1 for large text. This is her teal-mid darkened until it passes, which keeps
     the family without shipping unreadable copy. 6.83:1 on white, 5.45:1 on the teal panel. */
  --muted:      #3c6159;
  --near-black: #000000;

  /* ---- Accents, both deliberately narrow. ---- */
  --gold:       #E0A542;  /* NOT in her approved palette. Client 2026-08-28: may remain "a
                             subtle accent for limited calls to action or highlights", never a
                             primary colour. 2.05:1 on light, so NEVER type on a light ground.
                             Ink on gold is 6.83:1, which is why the button works. */
  --error:      #B3261E;  /* 6.05:1 on white. Form validation only, never brand */

  --radius-card: 12px;
  --radius-pill: 999px;
}

/* Guardrails. A colour that fails for type is allowed as a fill and nowhere else.
   FAILS on light grounds, graphic use only: --leaf, --green-lt, --sage-green, --sage,
   --teal-pale, --teal-tint, --gold. Safe for body text on light: --forest, --green-deep,
   --green-dark, --green-mid, --teal, --ink. Large text only on light: --teal-mid. */
.ege-btn--gold{ background: var(--gold); color: var(--ink); }   /* ink on gold = 6.83:1 */
.ege-btn--leaf{ background: var(--leaf); color: var(--near-black); }

body{ background: #fff; color: var(--ink); font-family: var(--font-body); font-weight: var(--wt-body); }

/* Serif is for large display headings. h4 down is supporting text and takes Montserrat,
   which is the split the client asked for. */
h1,h2,h3{ font-family: var(--font-display); font-weight: var(--wt-display); color: var(--forest); }
h4,h5,h6{ font-family: var(--font-body); font-weight: var(--wt-sub); color: var(--forest); }

.ege-skip{ position:absolute; left:-9999px; }
.ege-skip:focus{ left:8px; top:8px; z-index:10000; background:var(--forest); color:#fff; padding:12px 16px; }