/* ==========================================================================
   Workefy button system — single source of truth for all CTAs.

   Both Webflow buttons (.primary-btn-wrapper, .secondary-button) and design
   buttons (.wf-btn) share the same anatomy + surface-aware colors.
   Dark surfaces flip tokens once; do NOT add per-section button color rules.
   ========================================================================== */

:root {
  /* Anatomy — one shape/size language site-wide */
  --btn-radius: 10px;
  --btn-pad-y: 14px;
  --btn-pad-x: 28px;
  --btn-font-size: 15px;
  --btn-font-weight: 600;
  --btn-line-height: 1.25;
  --btn-gap: 10px;
  --btn-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --btn-shadow-hover: 0 8px 24px rgba(37, 40, 96, 0.18);

  /* Light-surface defaults (page content) */
  --btn-primary-bg: #5ba3e8;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #5ba3e8;
  --btn-primary-bg-hover: #458fd4;
  --btn-primary-fg-hover: #ffffff;
  --btn-primary-border-hover: #458fd4;

  --btn-secondary-bg: #252860;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: #252860;
  --btn-secondary-bg-hover: #1a1d45;
  --btn-secondary-fg-hover: #ffffff;
  --btn-secondary-border-hover: #1a1d45;

  --btn-ghost-bg: transparent;
  --btn-ghost-fg: #252860;
  --btn-ghost-border: rgba(37, 40, 96, 0.35);
  --btn-ghost-bg-hover: rgba(37, 40, 96, 0.06);
  --btn-ghost-fg-hover: #252860;
  --btn-ghost-border-hover: #252860;
}

/* --------------------------------------------------------------------------
   Dark surfaces — flip tokens once (nav, heroes, navy bands, footer).
   -------------------------------------------------------------------------- */

.navbar,
.section.hero-v1,
.section.inner,
.section.process,
.section.branch,
.section.team,
.section.footer,
.section.blog-inner,
.wf-bg-navy,
.wf-hero,
.section.user .user-left-wrap {
  --btn-primary-bg: #ffffff;
  --btn-primary-fg: #252860;
  --btn-primary-border: #ffffff;
  --btn-primary-bg-hover: rgba(255, 255, 255, 0.92);
  --btn-primary-fg-hover: #252860;
  --btn-primary-border-hover: rgba(255, 255, 255, 0.92);
  --btn-shadow-hover: 0 8px 24px rgba(15, 18, 48, 0.28);

  --btn-secondary-bg: transparent;
  --btn-secondary-fg: #ffffff;
  --btn-secondary-border: rgba(255, 255, 255, 0.55);
  --btn-secondary-bg-hover: #ffffff;
  --btn-secondary-fg-hover: #252860;
  --btn-secondary-border-hover: #ffffff;

  --btn-ghost-bg: transparent;
  --btn-ghost-fg: #ffffff;
  --btn-ghost-border: rgba(255, 255, 255, 0.45);
  --btn-ghost-bg-hover: rgba(255, 255, 255, 0.1);
  --btn-ghost-fg-hover: #ffffff;
  --btn-ghost-border-hover: #ffffff;
}

/* CTA band is a bright blue surface — use navy filled / white outline, not sky-on-sky */
.section.cta .cta-wrapper {
  --btn-primary-bg: #252860;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #252860;
  --btn-primary-bg-hover: #1a1d45;
  --btn-primary-fg-hover: #ffffff;
  --btn-primary-border-hover: #1a1d45;

  --btn-secondary-bg: #ffffff;
  --btn-secondary-fg: #252860;
  --btn-secondary-border: #ffffff;
  --btn-secondary-bg-hover: rgba(255, 255, 255, 0.92);
  --btn-secondary-fg-hover: #252860;
  --btn-secondary-border-hover: rgba(255, 255, 255, 0.92);
}

/* Lead form panel is always a white card — force light-surface primary */
.wf-lead__panel {
  --btn-primary-bg: #5ba3e8;
  --btn-primary-fg: #ffffff;
  --btn-primary-border: #5ba3e8;
  --btn-primary-bg-hover: #458fd4;
  --btn-primary-fg-hover: #ffffff;
  --btn-primary-border-hover: #458fd4;
}

/* --------------------------------------------------------------------------
   Shared anatomy helper (applied to every CTA family)
   -------------------------------------------------------------------------- */

.primary-btn-wrapper,
.secondary-button,
.wf-btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border-radius: var(--btn-radius) !important;
  border-style: solid;
  border-width: 1px;
  font-family: var(--manrope), Manrope, sans-serif;
  font-size: var(--btn-font-size) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: var(--btn-line-height) !important;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.18s var(--btn-ease),
    border-color 0.18s var(--btn-ease),
    color 0.18s var(--btn-ease),
    transform 0.18s var(--btn-ease),
    box-shadow 0.18s var(--btn-ease) !important;
}

.primary-btn-wrapper:hover,
.secondary-button:hover,
.wf-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--btn-shadow-hover);
}

.primary-btn-text,
.secondary-btn-text,
.wf-btn {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

/* --------------------------------------------------------------------------
   Role 1 — Primary CTA
   Maps: .primary-btn-wrapper (default/cta), .secondary-button (nav),
         .wf-btn--primary, .wf-btn--solid (same filled look — one hierarchy)
   -------------------------------------------------------------------------- */

.primary-btn-wrapper:not(.white):not(.pricing):not(.hero):not(.career):not(.normal),
.primary-btn-wrapper.cta,
.secondary-button,
.secondary-button.w-inline-block,
.nav-btn-wrap.green-light,
.wf-btn--primary,
.wf-btn--solid {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-fg) !important;
}

.primary-btn-wrapper:not(.white):not(.pricing):not(.hero):not(.career):not(.normal) .primary-btn-text,
.primary-btn-wrapper.cta .primary-btn-text,
.secondary-button .secondary-btn-text,
.wf-btn--primary,
.wf-btn--solid {
  color: var(--btn-primary-fg) !important;
}

.primary-btn-wrapper:not(.white):not(.pricing):not(.hero):not(.career):not(.normal):hover,
.primary-btn-wrapper.cta:hover,
.secondary-button:hover,
.wf-btn--primary:hover,
.wf-btn--solid:hover {
  background-color: var(--btn-primary-bg-hover) !important;
  border-color: var(--btn-primary-border-hover) !important;
  color: var(--btn-primary-fg-hover) !important;
}

.primary-btn-wrapper:not(.white):not(.pricing):not(.hero):not(.career):not(.normal):hover .primary-btn-text,
.primary-btn-wrapper.cta:hover .primary-btn-text,
.secondary-button:hover .secondary-btn-text {
  color: var(--btn-primary-fg-hover) !important;
}

/* Inline Webflow fills must still follow tokens */
.primary-btn-wrapper[style*="background-color"]:not(.white):not(.pricing):not(.hero):not(.career):not(.normal),
a.primary-btn-wrapper:not(.white):not(.pricing):not(.hero):not(.career):not(.normal) {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-fg) !important;
}

.secondary-button .secondary-btn-text[style*="color"],
.primary-btn-wrapper:not(.white):not(.pricing):not(.hero) .primary-btn-text[style*="color"] {
  color: var(--btn-primary-fg) !important;
}

/* --------------------------------------------------------------------------
   Role 2 — Ghost / outline (secondary action on any surface)
   Maps: .primary-btn-wrapper.hero, .primary-btn-wrapper.white (light outline),
         .wf-btn--ghost
   -------------------------------------------------------------------------- */

.primary-btn-wrapper.hero,
.primary-btn-wrapper.career,
.wf-btn--ghost {
  background-color: var(--btn-ghost-bg) !important;
  border-color: var(--btn-ghost-border) !important;
  color: var(--btn-ghost-fg) !important;
}

.primary-btn-wrapper.hero .primary-btn-text,
.primary-btn-wrapper.career .primary-btn-text {
  color: var(--btn-ghost-fg) !important;
}

.primary-btn-wrapper.hero:hover,
.primary-btn-wrapper.career:hover,
.wf-btn--ghost:hover {
  background-color: var(--btn-secondary-bg-hover) !important;
  border-color: var(--btn-secondary-border-hover) !important;
  color: var(--btn-secondary-fg-hover) !important;
}

.primary-btn-wrapper.hero:hover .primary-btn-text,
.primary-btn-wrapper.career:hover .primary-btn-text {
  color: var(--btn-secondary-fg-hover) !important;
}

.primary-btn-wrapper.hero[style*="background-color"] {
  background-color: var(--btn-ghost-bg) !important;
  border-color: var(--btn-ghost-border) !important;
}

/* Light-surface outline (pricing / white variants stay readable on white) */
.primary-btn-wrapper.white,
.primary-btn-wrapper.pricing {
  background-color: #ffffff !important;
  border-color: var(--brand-stroke, #e2e2e9) !important;
  color: #252860 !important;
  border-radius: var(--btn-radius) !important;
}

.primary-btn-wrapper.white .primary-btn-text,
.primary-btn-wrapper.pricing .primary-btn-text {
  color: #252860 !important;
}

.primary-btn-wrapper.white:hover {
  background-color: var(--btn-primary-bg) !important;
  border-color: var(--btn-primary-border) !important;
  color: var(--btn-primary-fg) !important;
}

.primary-btn-wrapper.white:hover .primary-btn-text {
  color: var(--btn-primary-fg) !important;
}

/* --------------------------------------------------------------------------
   Groups
   -------------------------------------------------------------------------- */

.wf-btns,
.hero-v1-button-wrap,
.cta-button,
.section-bottom-btn {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */

.primary-btn-wrapper:focus-visible,
.secondary-button:focus-visible,
.wf-btn:focus-visible {
  outline: 3px solid var(--brand-accent, #f2a93b);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .primary-btn-wrapper,
  .secondary-button,
  .wf-btn,
  .primary-btn-wrapper:hover,
  .secondary-button:hover,
  .wf-btn:hover {
    transition: none !important;
    transform: none !important;
  }
}