/* ═══════════════════════════════════════════════════════════════════
   ArbKeep Brand System — marketing (arbkeep.com) Heartwood variant
   See /BRAND.md for semantic routing, voice, and rules of drift
   prevention. NOT a duplicate of the app brand.css: this is the Heartwood
   cut — --bg greens the surfaces themselves (--bg #0a110c, --bg-card
   #142018) and --elderberry is marketing's own muted decorative #53405B
   (there is no Health surface here). Accents — lilac, lichen, honey,
   staghorn, monarch — match the app tokens; keep them in sync.
   NOTE: index.html and pricing.html are self-contained (inline :root, do
   not link this file); mirror any accent change into their inline blocks.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Foundation (near-black / parchment — CanopyKeep descent) ─── */
  --bg:               #0a110c;   /* Heartwood forest-green (was #0a0b0a) */
  --bg-card:          #142018;   /* green panel (was #111311) */
  --bg-card-elevated: #18271b;   /* (was #161916) */
  --bg-input:         #0f1812;   /* (was #1a1d1a) */

  /* ─── Lichen ramp (primary accent) ─── */
  --lichen:           #a3b18a;
  --lichen-dim:       #7a8a66;
  --lichen-bright:    #c5d1a8;
  --lichen-glow:      rgba(163,177,138,0.08);

  /* ─── Text ramp ─── */
  --text:             #e8e4dc;
  --text-secondary:   #bdb8a9;   /* brightened 2026-06-30 — #9a9688 read too dim on the green even at a desk */
  --text-muted:       #8c897c;   /* brightened — #6b6860 was near-illegible on the green field */
  --text-warm:        #d4c9b0;

  /* ─── Dividers ─── */
  --divider:          rgba(163,177,138,0.12);
  --divider-strong:   rgba(163,177,138,0.25);

  /* ─── Accent · Lilac (brand sweep 2026-06-30; renamed from --kraft 2026-07-01) ───
     kraft warm-tan RETIRED → luminous lilac; lichen green stays primary.
     Greens + purples are the palette; the duotone glow is for prominent fills. */
  --lilac:            #A98BBE;   /* luminous purple — legible on the green field */
  --lilac-dim:        rgba(169,139,190,0.15);
  --lilac-stroke:     rgba(169,139,190,0.38);
  /* Guardian duotone (purple→green) + glow — for prominent CTAs, the FAB,
     hero accents. Use as a `background:` (gradients can't be a color/border). */
  --guardian-grad:    linear-gradient(135deg, #9a6fae, #5d7548);
  --guardian-grad-soft: linear-gradient(135deg, rgba(154,111,174,0.22), rgba(93,117,72,0.22));
  --guardian-glow:    0 0 22px rgba(154,111,174,0.30);

  /* ─── Monarch Gold (Tree Steward Program ONLY · never a general gold) ─── */
  --monarch:          #C5B358;
  --monarch-dim:      rgba(197,179,88,0.12);
  --monarch-glow:     rgba(197,179,88,0.22);

  /* ─── The Five Pillars · Mount Purpose alchemy ─── */
  --honey:            #E38F39;        /* Log House · warn / attention */
  --honey-dim:        rgba(227,143,57,0.12);
  --walnut:           #5D4434;        /* Black Walnut · earth / dormant */
  --walnut-dim:       rgba(93,68,52,0.25);
  --elderberry:       #53405B;        /* American Elderberry · muted decorative base (marketing-only; app Health base is berry #6a3070) */
  --elderberry-dim:   rgba(83,64,91,0.15);
  --elderberry-bright:#C79BDA;        /* light-lavender accent — the value index/pricing/blog actually render (app Health-bright is #BE6FBE, a separate surface) */
  --staghorn:         #C12026;        /* Staghorn Berry · danger / red-flag */
  --staghorn-dim:     rgba(193,32,38,0.15);
  --hickory:          #F2D3A6;        /* Shagbark Hickory · editorial highlight */
  --hickory-dim:      rgba(242,211,166,0.12);

  /* ─── Typography ─── */
  --serif:      'Cormorant Garamond', Georgia, serif;
  --sans:       'Josefin Sans', sans-serif;
  --sans-chat:  'DM Sans', -apple-system, sans-serif;
  --display:    'Cinzel', Georgia, serif;

  /* ─── Type scale — canonical, locked from the v1 homepage (2026-06-15) ─── */
  --type-display:   clamp(54px, 10vw, 92px);  /* hero H1 · --serif wt400 lh1.04 ls.01em */
  --type-h2:        clamp(38px, 7vw, 58px);   /* section heading · --serif wt400 */
  --type-h3:        clamp(24px, 4vw, 30px);   /* sub / card heading */
  --type-lead:      26px;                      /* hero sub / lead · lh1.5 (~23px mobile) */
  --type-prominent: 24px;                      /* section sub / prominent body · lh1.6 */
  --type-body:      22px;                      /* base body · --sans wt300 lh1.65 */
  --type-eyebrow:   14px;                      /* eyebrow/label · ls.2em uppercase --lichen */
}

/* ─── Wordmark — ArbKeep trunk-flare lockup ─────────────────────────
   Cinzel uppercase with graduated weights that read as a tree showing
   its trunk flare. Light at A and P (canopy tip / root tip), heaviest
   at K (the flare — where the trunk meets structural roots, the place
   a properly-planted tree shows above grade). See BRAND.md "Wordmark"
   for design language + don'ts.

   Usage:
     <span class="wordmark">
       <span>A</span><span>R</span><span>B</span><span>K</span><span>E</span><span>E</span><span>P</span>
     </span>

   Each surface must also load Cinzel in its <head> (one combined link
   with the existing Cormorant + Josefin families):
     family=Cinzel:wght@400;500;700;900
   ─────────────────────────────────────────────────────────────────── */
.wordmark {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  display: inline-block;
  line-height: 1;
  color: var(--text);
}
.wordmark > span:nth-child(1) { font-weight: 400; } /* A · canopy tip */
.wordmark > span:nth-child(2) { font-weight: 500; } /* R · upper canopy */
.wordmark > span:nth-child(3) { font-weight: 700; } /* B · trunk */
.wordmark > span:nth-child(4) { font-weight: 900; } /* K · trunk flare */
.wordmark > span:nth-child(5) { font-weight: 700; } /* E · structural roots */
.wordmark > span:nth-child(6) { font-weight: 500; } /* E · mid roots */
.wordmark > span:nth-child(7) { font-weight: 400; } /* P · root tip */
.wordmark--on-light { color: var(--bg); }