/*
 * LiveHost brand tokens.
 *
 * Single source of truth for colour tokens shared across:
 *   - livehost.com (marketing layout + Webflow site.css)
 *   - api.livehost.com (developers layout)
 *   - shopify-app.livehost.com (Shopify Remix _index page)
 *
 * The --lh-* tokens are the canonical LiveHost names; refer to these from
 * any new code. The Webflow aliases below let Webflow's site.css pick up
 * variant overrides through the same names it already uses.
 *
 * Stakeholder variants live in sibling files brand-tokens.<name>.css and
 * are loaded *after* this one when the preview cookie selects them. They
 * only need to override the --lh-* tokens.
 *
 * Loaded after site.css; itself overridable by ?theme=<name> variants.
 */

:root {
  /* LiveHost design tokens — canonical names. */
  --lh-cream-1:      #f4f2ee;
  --lh-cream-2:      #f0ece6;
  --lh-yellow:       #fef7af;
  --lh-yellow-hover: #fae879;
  --lh-ink:          #212121;
  --lh-ink-soft:     #525252;
  --lh-overlay:      rgba(0, 0, 0, 0.65);
  --lh-paper:        #fafafa;
  --lh-paper-alt:    #f4f4f4;
  --lh-surface:      #ffffff;

  /* Space-separated RGB triples — for rgb(var(--lh-*-rgb) / alpha) usage where
     a Tailwind /opacity modifier can't combine with var(). Keep in sync with
     the hex tokens above. */
  --lh-yellow-rgb:   254 247 175;
  --lh-cream-1-rgb:  244 242 238;

  /* Webflow site.css compatibility aliases. These are also re-asserted via
     the universal selector below to punch through Webflow's per-class scope. */
  --background--bg-01:   var(--lh-cream-1);
  --background--bg-02:   var(--lh-cream-2);
  --main--yellow:        var(--lh-yellow);
  --neutral--neutral-00: var(--lh-surface);
  --neutral--neutral-01: var(--lh-paper);
  --neutral--neutral-02: var(--lh-paper-alt);
  --neutral--neutral-10: var(--lh-ink-soft);
  --neutral--neutral-11: var(--lh-ink);

  /* The hero `.stripe` overlay used to default to white-40 (rgba(255,255,255,
     0.4)) which read as harsh vertical bands on saturated washes (powder,
     sage, lilac…). Drop the global default to a barely-visible 6% alpha; the
     stripes still exist as a design touch on the default cream, but disappear
     gracefully under any wash. */
  --white-opacity--white-40: rgba(255, 255, 255, 0.06);
}

/* Webflow's exported per-class scopes (.primary-button, .section.inverse,
   .pricing-card, .tag, .welcome-card, .contact-form…) re-declare the three
   brand-essential tokens (page wash + section panel + accent) inline on
   every element of that class — which beats :root by specificity. Re-assert
   them on every element with the universal selector + !important so the
   variant cascade always wins. The neutral/ink overrides are deliberately
   excluded here: .section.inverse needs to keep its white-on-dark text
   neutrals as Webflow set them. */
* {
  --background--bg-01: var(--lh-cream-1) !important;
  --background--bg-02: var(--lh-cream-2) !important;
  --main--yellow:      var(--lh-yellow)  !important;
}

/* The Webflow IX2 runtime injects a "Made in Webflow" badge with inline
   high-specificity styles. Hide it. */
.w-webflow-badge { display: none !important; }

/* Legacy dark-section texture toning: desaturate + darken the warm abstract
   textures so dark sections read as tonally-neutral editorial-dark.
   NOTE: .feature-tab-ui was removed from this rule — `filter` cascades to the
   whole subtree, so it was also desaturating/darkening the feature SCREENSHOTS
   (a sepia cast). That frame's texture is now toned on a ::before in sections.css.
   The live pricing/contact sections tone via lh-section--texture; .pricing-bg /
   .contact-bg are the original Webflow wrappers, kept for parity. */
.pricing-bg,
.contact-bg {
  filter: saturate(0.22) brightness(0.82);
}

/* The Webflow newsletter heading defaults to --neutral--neutral-10 (ink-soft).
   On the lifted-card footer panel that reads as a faint label rather than a
   heading; lift it to the primary ink colour. Same treatment for the FAQ
   accordion question text so the questions punch on the lifted-card panel. */
.subscribe-heading,
.section.footer .subscribe-heading {
  color: var(--lh-ink);
}

/* Footer "Sign up for news" — restore the Webflow integrated pill. The
   .inline-form is the rounded capsule (its --white-opacity--white-40 fill is
   nerfed under the wash, so re-assert a surface fill), the email field sits
   borderless inside it, and the submit (value "→") is a dark circular button
   at the right end. An earlier patch bordered the input itself, which boxed
   it off and left the arrow button stranded outside. */
.subscribe-form-wrap .inline-form {
  max-width: 420px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 6px 6px 6px 10px;
  border: 1px solid var(--lh-cream-2);
  border-radius: 999px;
  background-color: var(--lh-surface) !important;
}
.subscribe-form-wrap .field-wrap { flex: 1; min-width: 0; }
.text-input.subscribe {
  height: 44px;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none;
}
.text-input.subscribe:focus { outline: none; border: none !important; }
.subscribe-form-wrap .filled-button {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
}

/* FAQ accordion ("Your questions, answered") — the right-hand .accordions
   panel was cream-2 on a cream-1 page (near-zero contrast, read as an empty
   tinted box). Make it a clean surface card with dividers so the questions
   stand out on the powder wash. */
#faq .accordions {
  background-color: var(--lh-surface);
  border: 1px solid var(--lh-cream-2);
  border-radius: 20px;
  padding: 0.25rem 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}
#faq .accordion-block { background-color: transparent !important; border-bottom: 1px solid var(--lh-cream-2); }
#faq .accordion-block:last-child { border-bottom: none; }
#faq .accordion-button { color: var(--lh-ink); }

/* Testimonial quote cards reuse Webflow's --white-opacity--white-40 fill, which
   we nerfed to 6% above for the hero stripes — that left the cards near-invisible
   on the cream wash (the quotes read as text floating on the page, the same
   failure the FAQ panel had). Give them the lifted-surface treatment so each
   quote reads as a distinct card: an opaque surface fill + hairline border +
   soft shadow. var(--lh-surface) keeps every variant's own card colour (e.g.
   powder's #FBFDFE), and the scoped selector beats site.css's .testimonial on
   specificity without !important. */
.testimonial-section .testimonial {
  background-color: var(--lh-surface);
  border: 1px solid var(--lh-cream-2);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}