/* ============================================================================
 * Living Waters — Design Tokens  (handle: lw-tokens)
 * ----------------------------------------------------------------------------
 * Extracted verbatim from the client-approved mockup: mockups/index.html
 * This file is the single source of truth for the design system. The child
 * theme's stylesheet and every widget stylesheet declare `lw-tokens` as a
 * dependency, so the palette survives a theme change.
 *
 * ⚠️ CONTRAST RULE — do not "correct" this back to the raw logo colours.
 * The logo green (#249078) is 3.58:1 on paper and FAILS WCAG AA for text.
 * White on that green is 3.94:1 and also fails. So:
 *     --lw-green / --lw-blue      → GRAPHICS ONLY (dots, rules, waves, icons)
 *     --lw-green-dk / --lw-blue-dk → ALL TEXT AND PRIMARY BUTTONS
 * The brand stays fully present; nothing fails. See docs/DESIGN-SPEC.md §1.
 * ========================================================================== */

:root{
  /* ---- Brand: sampled pixel-exact from the client logo ---- */
  --lw-green:#249078;        /* logo green — graphics */
  --lw-green-dk:#1B6F5C;     /* text + primary button        5.50:1 on paper */
  --lw-green-dr:#175F4E;     /* primary button hover */
  --lw-green-lt:#3FB496;     /* accents on dark grounds */
  --lw-mint:#6FD3B6;         /* eyebrows/links on dark       8.04:1 on deep */
  --lw-blue:#0C84A6;         /* logo blue — graphics */
  --lw-blue-dk:#0A6B87;      /* text                         5.51:1 on paper */

  /* ---- Ink ---- */
  --lw-ink:#10302E;          /* headlines, body             12.87:1 */
  --lw-ink-soft:#2E4C49;     /* secondary body               8.51:1 */
  --lw-muted:#556F6C;        /* small text, captions         4.93:1 */
  --lw-faint:#5F7572;        /* micro-labels, decorative     4.47:1 */

  /* ---- Ground ---- */
  --lw-paper:#F6F4EF;        /* the page */
  --lw-paper-2:#FBFAF7;      /* alternating sections */
  --lw-white:#FFFFFF;
  --lw-deep:#072F2C;         /* dark sections, footer */
  --lw-deep-2:#0A3A42;       /* the closing band */

  /* ---- Support ---- */
  --lw-amber:#8A6318;        /* gold fill-in placeholders (functional) */
  --lw-amber-rule:rgba(138,99,24,.45);   /* the dotted rule under one */
  --lw-amber-lit:#E3B45F;    /* lit windows in the house drawing */

  /* ---- Lines ---- */
  --lw-line:rgba(16,48,46,.14);
  --lw-line-soft:rgba(16,48,46,.08);
  --lw-line-strong:rgba(16,48,46,.30);   /* outlines that must READ as controls */
  --lw-line-dark:rgba(255,255,255,.16);

  /* ---- Type ---- */
  --lw-display:'Fraunces',Georgia,'Times New Roman',serif;
  --lw-sans:'Instrument Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

  --lw-h-xl:clamp(3.1rem,8.4vw,7.4rem);
  --lw-h-lg:clamp(2.3rem,5.2vw,4.5rem);
  --lw-h-md:clamp(1.7rem,3.1vw,2.7rem);
  --lw-h-sm:clamp(1.25rem,1.9vw,1.6rem);
  --lw-lede:clamp(1.08rem,1.5vw,1.32rem);
  --lw-body-lg:clamp(1.02rem,1.2vw,1.15rem);

  /* ---- Space: strict 8px system ---- */
  --lw-s1:8px;  --lw-s2:16px; --lw-s3:24px; --lw-s4:32px; --lw-s5:48px;
  --lw-s6:64px; --lw-s7:96px; --lw-s8:128px; --lw-s9:176px;

  /* ---- Layout ---- */
  --lw-gut:clamp(20px,5vw,72px);
  --lw-maxw:1320px;
  --lw-maxw-narrow:940px;
  --lw-radius:4px;
  --lw-radius-lg:16px;

  /* ---- Motion ---- */
  --lw-ease:cubic-bezier(.16,1,.3,1);
  --lw-dur:.95s;

  /* ---- Elevation (used sparingly — this design leans on rules, not shadows) ---- */
  --lw-shadow-sm:0 1px 2px rgba(16,48,46,.05), 0 1px 3px rgba(16,48,46,.04);
  --lw-shadow:0 14px 34px -14px rgba(16,48,46,.28);
  --lw-shadow-lg:0 24px 60px -20px rgba(16,48,46,.34);
}

/* ---------------------------------------------------------------------------
 * Ground variants — every section widget sets one of these on its root.
 * Declared here so a widget never hardcodes a colour, and so `on-dark`
 * inverts text automatically.
 * ------------------------------------------------------------------------ */
.lw-ground--paper   { background-color:var(--lw-paper);   color:var(--lw-ink); }
.lw-ground--paper-2 { background-color:var(--lw-paper-2); color:var(--lw-ink); }
.lw-ground--white   { background-color:var(--lw-white);   color:var(--lw-ink); }
.lw-ground--deep    { background-color:var(--lw-deep);    color:#DDEAE7; }
.lw-ground--deep-2  { background-color:var(--lw-deep-2);  color:#DDEAE7; }
.lw-ground--none    { background-color:transparent; }

/* ---------------------------------------------------------------------------
 * The gold placeholder on a dark ground.
 * --lw-amber is 4.93:1 on paper and roughly 1.6:1 on --deep, which is not a
 * placeholder any more — it is a word you cannot read. Every context that puts
 * light text on a dark ground redefines it here, in one place, rather than each
 * of them carrying its own `.lw-fill` override. `.lw-on-dark` is listed
 * separately from the ground classes because the FOOTER emits it WITHOUT one.
 * (The header does neither — it is knocked out by `:has()`, so its override
 * lives beside the rest of that block in widgets.css.)
 * ------------------------------------------------------------------------ */
.lw-ground--deep,
.lw-ground--deep-2,
.lw-on-dark,
.lw-mobmenu{
  --lw-amber:#E3B45F;                    /* 8.3:1 on --deep */
  --lw-amber-rule:rgba(227,180,95,.42);
}

.lw-ground--deep,
.lw-ground--deep-2{
  --lw-ink:#FFFFFF;
  --lw-ink-soft:rgba(221,234,231,.78);
  --lw-muted:rgba(221,234,231,.62);
  --lw-faint:rgba(221,234,231,.5);
  --lw-line:var(--lw-line-dark);
  --lw-line-soft:rgba(255,255,255,.09);
  --lw-line-strong:rgba(255,255,255,.34);
  --lw-green-dk:var(--lw-mint);   /* eyebrows/links flip to mint on dark */
  --lw-blue-dk:#6FC4DE;
}