/* =============================================================================
   Site-local overrides — NOT part of the canonical brand file (lf-tokens.css).
   Loaded AFTER lf-tokens.css in Base.astro, so rules here win.
   Keep this file small and intentional. Each block is a candidate to upstream
   into LeaderFactor/lf-brain once the design is approved; until then this is how
   the marketing site diverges from canon without hand-editing the vendored file.
   ============================================================================= */

/* CTA buttons (item #2 / skill-template revamp).
   Bigger, heavier label + remove the default anchor underline. The pill shape,
   padding, and color variants (glass / on-light / solid) all stay from lf-tokens.css.
   - text-decoration:none fixes a real bug: .lf-button never reset the <a> underline.
   - 13px (--fs-p3) → 16px (--fs-p2), weight 500 → 600, height 48 → 52 for balance. */
.lf-button {
  height: 52px;
  font: 600 var(--fs-p2) / 1 var(--font-sans);
  text-decoration: none;
}

/* =============================================================================
   2026-08 design review, Phase 1 (site-wide button + link foundations).
   ============================================================================= */

/* --cta: the page's full-saturation CTA color. Accent blue on brand-centric
   pages; the solution color inside a solution scope. Mirrors the .is-* map in
   lf-tokens.css so it can move there verbatim when upstreamed. */
:root    { --cta: var(--lf-accent-blue); }
.is-ps   { --cta: var(--c-ps); }
.is-eq   { --cta: var(--c-eq); }
.is-cam  { --cta: var(--c-cam); }
.is-epic { --cta: var(--c-epic); }
.is-dm   { --cta: var(--c-dm); }
.is-ltai { --cta: var(--c-ltai); }
.is-tp   { --cta: var(--c-tp); }

/* Accent-filled primary — replaces the per-page square .hero-btn copies, so it
   inherits the pill radius and sizing every other button has. */
.lf-button--accent {
  background: var(--cta);
  border-color: transparent;
  color: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: background var(--transition), border-color var(--transition), transform var(--transition), filter var(--transition);
}
/* The hover MUST restate the background: the canonical .lf-button:hover glass
   rule otherwise outranks the variant's resting fill and the button "empties"
   into glass mid-hover (seen on the skill-page heroes, 2026-08-11). */
.lf-button--accent:hover  { background: var(--cta); border-color: transparent; filter: brightness(1.12); }
.lf-button--accent:active { filter: none; background: var(--lf-dark); transform: translateY(1px); }

/* On-light buttons keep the canonical light-glass resting state (Jillian's
   call, 2026-08-11 — the solid-navy default was tried and rolled back). Hover
   DEEPENS the glass (Jillian, same day): glass buttons stay glass — no fill
   flip — but the step up is strong enough to actually see. */
.lf-button--on-light:hover {
  background: rgba(16, 19, 34, 0.14);
  border-color: rgba(16, 19, 34, 0.30);
}

/* Solid (navy) buttons get the same full-color hover — the canonical hover was
   a navy-on-navy shade shift (#101322 -> #1B2032) nobody can see. */
.lf-button--solid:hover { background: var(--cta); }

/* =============================================================================
   Contrast pairing (2026-08 review: "dark version and light version depending
   on section background" — buttons must read LIGHT on dark sections and carry
   a real fill on light ones).
   ============================================================================= */

/* Bare glass buttons are used exclusively on dark photography and dark bands
   (audited 2026-08-11), but the canonical glass is a DARK tint — dark-on-dark.
   Lighten it so the ghost reads as a light element. :not() keeps this off the
   modifier variants, which set their own fills. */
.lf-button:not([class*="lf-button--"]) {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
}
/* Hovers on dark surfaces must go LIGHTER — the accent colors are themselves
   dark, so an accent fill here reads as the button vanishing into the band. */
.lf-button:not([class*="lf-button--"]):hover {
  background: rgba(255, 255, 255, 0.26);
  border-color: rgba(255, 255, 255, 0.65);
}

/* Inside an opted-in dark band, filled variants flip to their light versions
   automatically — no per-page overrides needed. (EventPage/events hub already
   hand-rolled the cream-solid treatment; this makes it the system.) */
[data-theme="dark"] .lf-button--solid {
  background: var(--lf-cream);
  border-color: transparent;
  color: var(--lf-dark);
}
[data-theme="dark"] .lf-button--solid:hover { background: #fff; color: var(--lf-dark); }
[data-theme="dark"] .lf-button--on-light {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.30);
  color: #fff;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
[data-theme="dark"] .lf-button--on-light:hover { background: rgba(255, 255, 255, 0.26); border-color: rgba(255, 255, 255, 0.65); color: #fff; }
[data-theme="dark"] .lf-button--outline { border-color: rgba(255, 255, 255, 0.55); color: #fff; }
[data-theme="dark"] .lf-button--outline:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }

/* Ghost outline for light sections (replaces the per-page .ghost-light /
   .hero-ghost-light copies). */
.lf-button--outline {
  background: none;
  border-color: var(--border);
  color: var(--fg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.lf-button--outline:hover  { background: none; border-color: var(--fg); }
.lf-button--outline:active { background: var(--lf-dark); color: #fff; }

/* Text-link CTAs highlight to the full-saturation accent on hover — not just a
   cursor change (review note). .text-link was previously defined per-page with
   no hover at all. */
.lf-arrow-link { transition: color var(--transition); }
.lf-arrow-link:hover { color: var(--cta); }
.text-link { color: var(--fg); text-decoration: underline; transition: color var(--transition); }
.text-link:hover { color: var(--cta); }