/* ==========================================================================
   WarriorBabe — Hers-derived brand layer
   Load AFTER wb-v2.css. Overrides the token layer only; every component in
   wb-v2.css re-themes through it, plus the handful of structural rules that
   assumed "brand = dark colour, text = white".

   Palette read from live computed styles on forhers.com (8 Aug 2026).
   Full documentation + contrast matrix: BRAND.md
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap');

:root {
  /* ---------- signature ------------------------------------------------ */
  --lime:          #C5ED82;
  --lime-hover:    #B6E268;
  --on-lime:       #2D3421;   /* 8.65:1 — never white on lime (1.33:1) */

  /* ---------- darks ---------------------------------------------------- */
  --moss:          #2D3421;
  --moss-deep:     #232817;
  --slate:         #1E3944;
  --sage:          #A3B58D;   /* shapes only — 2.2:1 as text, never type */
  --pale-sage:     #B4CDC4;

  /* ---------- neutrals -------------------------------------------------- */
  --ink-solid:     #1C1C1C;
  --wash:          #F2F9F3;
  --wash-2:        #F5FAF6;
  --hairline:      rgba(0,0,0,.12);
  --hairline-soft: rgba(0,0,0,.06);

  /* =======================================================================
     Remap the wb-v2 tokens. Everything downstream re-themes for free.
     ======================================================================= */
  --brand:          var(--lime);
  --brand-hover:    var(--lime-hover);
  --brand-bright:   var(--lime);          /* accent on dark — 9.73:1 on moss */
  --brand-deep:     var(--moss);
  --brand-magenta:  var(--slate);         /* panel headers — white on slate 12.18:1 */

  --ink:            var(--moss-deep);
  --plum:           var(--slate);
  --plum-2:         var(--moss);

  --surface:        #ffffff;
  --surface-2:      var(--wash);
  --surface-3:      var(--wash-2);
  --line:           var(--hairline-soft);

  --text:           var(--ink-solid);     /* 17.04:1 on white */
  --text-muted:     rgba(0,0,0,.65);      /* Hers' own secondary */
  --text-on-dark:   #ffffff;
  --text-on-dark-2: var(--pale-sage);     /* 7.68:1 on moss */

  --ok:             #3F6B33;
  --warn:           #7A5A10;
  --danger:         #A33327;

  /* ---------- type — one family, tight tracking, light display weights -- */
  --f-body:    'Figtree', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --f-display: 'Figtree', -apple-system, 'Helvetica Neue', Arial, sans-serif;

  --t-xs:   12px;
  --t-sm:   14px;
  --t-md:   16px;
  --t-lg:   20px;
  --t-xl:   28px;
  --t-2xl:  40px;
  --t-hero: clamp(34px, 5vw, 57px);

  /* ---------- shape — Hers' most recognisable signature ----------------- */
  --r-sm:   12px;
  --r-md:   24px;
  --r-lg:   24px;
  --r-full: 48px;

  /* softer elevation — Hers barely uses shadow */
  --e-1: 0 1px 2px rgba(28,28,28,.04);
  --e-2: 0 2px 8px rgba(28,28,28,.06);
  --e-3: 0 12px 40px rgba(28,28,28,.10);

  /* glass retuned for a green ground */
  --glass-light:      rgba(255,255,255,.76);
  --glass-dark:       rgba(35,40,23,.62);
  --glass-dark-edge:  rgba(255,255,255,.16);
}

/* =========================================================================
   Structural overrides — rules that assumed white-on-brand.
   White on lime is 1.33:1, so the primary button inverts to dark-on-lime.
   ========================================================================= */
.btn {
  background: var(--lime);
  color: var(--on-lime);              /* 8.65:1 */
  font-weight: 600;                   /* Hers runs 400–500; 600 for a $27 CTA */
  border-radius: var(--r-full);
  box-shadow: none;
  border: 2px solid transparent;
}
.btn:hover  { background: var(--lime-hover); color: var(--on-lime); box-shadow: var(--e-2); }
.btn small  { color: var(--on-lime); opacity: .78; }

.btn-ghost {
  background: transparent; color: var(--ink-solid);
  border: 1px solid var(--hairline);
  font-weight: 500;
}
.btn-ghost:hover { background: var(--ink-solid); color: #fff; border-color: var(--ink-solid); }
.sec-dark .btn-ghost, .glass-dark .btn-ghost {
  color: #fff; border-color: rgba(255,255,255,.28);
}
.sec-dark .btn-ghost:hover, .glass-dark .btn-ghost:hover {
  background: var(--lime); color: var(--on-lime); border-color: var(--lime);
}

/* dark sections — moss, not plum. Lime glow instead of pink. */
.sec-dark {
  background:
    radial-gradient(900px 420px at 50% -10%, rgba(197,237,130,.16), transparent 62%),
    linear-gradient(180deg, var(--slate) 0%, var(--moss-deep) 100%);
}
.sec-dark .eyebrow, .glass-dark .eyebrow, .chrome .eyebrow { color: var(--lime); }
.eyebrow { color: var(--moss); letter-spacing: .1em; font-weight: 600; }
.sticky-bar .price { font-weight: 600; }

/* display type — Hers voice: light weight, tight leading, negative tracking.
   This replaces the condensed oblique face. See BRAND.md §3. */
.display {
  font-family: var(--f-display);
  font-style: normal;
  font-weight: 420;
  text-transform: none;
  letter-spacing: -.01em;
  line-height: 1.0;
  background: none;
  -webkit-background-clip: initial; background-clip: initial;
  color: #fff;
}
.display-bar {
  font-family: var(--f-display); font-style: normal; font-weight: 500;
  text-transform: none; letter-spacing: -.01em;
}
h1.hero  { font-weight: 420; letter-spacing: -.015em; line-height: 1.08; }
h1.hero em { color: var(--lime); font-style: normal; font-weight: 500; }
h2.title { font-weight: 500; letter-spacing: -.01em; }
h3.sub   { font-weight: 500; }
h1,h2,h3,h4 { font-weight: 500; }

/* panel headers — white on slate (12.18:1), not white on lime */
.panel .head, .card-head {
  background: var(--slate); color: #fff;
}
.panel .head h2 {
  font-family: var(--f-display); font-style: normal; font-weight: 500;
  text-transform: none; letter-spacing: -.01em;
}

/* cards — 24px, hairline, almost no shadow */
.card { border-radius: var(--r-card, 24px); border: 1px solid var(--hairline-soft); box-shadow: var(--e-1); }
.offer { border: 1px solid var(--hairline); border-radius: 24px; box-shadow: var(--e-2); }
.offer .price { font-family: var(--f-display); font-weight: 500; letter-spacing: -.02em; }
.offer .save  { background: var(--lime); color: var(--on-lime); font-weight: 600; }

/* step numerals + icon chips */
.step .n { background: var(--lime); color: var(--on-lime); font-family: var(--f-display); font-weight: 600; }
.benefit .ic { background: var(--wash); color: var(--moss); }
.appt .av { background: var(--lime); color: var(--on-lime); }

/* semantic problem/fix blocks, retinted for a green system */
.pf-problem { background: #FBF2F0; border-left-color: var(--danger); }
.pf-fix     { background: var(--wash); border-left-color: var(--ok); }
.list-ok li .icon { color: var(--ok); }

/* sticky bar — glass over content, ink text, lime action */
.sticky-bar { color: var(--ink-solid); border-top: 1px solid rgba(255,255,255,.85); }
.sticky-bar .price { color: var(--ink-solid); }
.countdown .n { font-family: var(--f-display); font-weight: 600; letter-spacing: -.01em; }

/* marquee + footer */
.marquee-wrap { background: var(--moss); }
.marquee .dot { color: var(--lime); }
footer.site { background: var(--moss-deep); }

/* progress chrome on the upsells */
.progress i.on { background: var(--lime); }

/* body links: lime on white is 1.33:1, so generic anchors wear moss on light
   surfaces; dark surfaces keep their own overrides */
a { color: var(--moss); }
.sec-dark a, .glass-dark a, footer.site a, .marquee-wrap a, .conf-bar a { color: var(--lime); }

/* ...but a CTA is not a body link. Without this, a .btn inside a dark or glass
   surface inherits lime type on a lime pill (1.33:1, effectively invisible) and
   only becomes readable on hover, where .btn:hover sets the colour explicitly. */
a.btn, .sec-dark a.btn, .glass-dark a.btn, footer.site a.btn,
.marquee-wrap a.btn, .conf-bar a.btn, .sticky-bar a.btn { color: var(--on-lime); }
/* ghost buttons keep ink on light surfaces; only dark contexts go white */
.sec-dark a.btn-ghost, .glass-dark a.btn-ghost { color: #fff; }
.sec-dark a.btn-ghost:hover, .glass-dark a.btn-ghost:hover { color: var(--on-lime); }

/* wordmark: the serif stays serif, tinted lime */
.wb-logo em { color: var(--lime); }

/* inputs — 12px radius per Hers' small-surface token */
.field input, .field select { border-radius: var(--r-sm); border-color: var(--hairline); }
.field input:focus-visible, .field select:focus-visible { border-color: var(--moss); }
:focus-visible { outline-color: var(--moss); }

/* forced-colors + reduced-transparency inherit from wb-v2.css */