/*
 * One look for every call-to-action button of the redesigned public pages (homepage, persona pages,
 * plans and blog), modelled on the green "Book a Demo" of the "Looking for a team solution?" card.
 * Every value is a token on :root: change it here and every page follows. A page can override a token
 * on its own wrapper (see the persona colour below).
 * Loaded on every public page by base-landing-page.html, but each rule is scoped to the redesigned
 * page wrappers (.sd-home, .sd-pp, .sd-plans, .sd-blog, .sd-post, .sd-event), so the menu, footer and other pages keep their look.
 * Roles are read from what the button does, not from its legacy class:
 *   primary   - Try For Free / free trial (links to the plans, plans modal, trial modal), event tickets and sign-up, and the team Book a Demo
 *   secondary - Book a Demo next to a primary, More Articles, Visit Blog
 *   ghost     - outlined in white on dark backgrounds (tokens only, used by the top bar's Log In)
 */

/* ------------------------------------------------------------------ Tokens */

:root {
  /* Shape */
  --sd-btn-font-size: 1.25rem;
  --sd-btn-font-weight: 700;
  --sd-btn-line-height: 1.5;
  --sd-btn-padding-y: 0.5rem;
  --sd-btn-padding-x: 1.5rem;
  --sd-btn-radius: 0.5rem;
  --sd-btn-border-width: 1.5px;
  --sd-btn-transition: color .2s ease, background-color .2s ease, border-color .2s ease;
  --sd-btn-focus-ring: 0 0 0 0.25rem rgba(80, 216, 120, 0.35);

  /* Primary: brand green with navy text */
  --sd-btn-primary-bg: #50D878;
  --sd-btn-primary-bg-hover: #6BE08E;
  --sd-btn-primary-color: #1F2A3D;

  /* Secondary: outlined, filled on hover */
  --sd-btn-secondary-color: #29364D;
  --sd-btn-secondary-color-hover: #FFFFFF;

  /* Ghost: outlined in white on dark backgrounds */
  --sd-btn-ghost-color: #FFFFFF;
  --sd-btn-ghost-border: rgba(255, 255, 255, 0.45);
  --sd-btn-ghost-bg-hover: rgba(255, 255, 255, 0.12);
}

/* Persona and plans pages: secondary buttons in the page colour */
.sd-pp,
.sd-plans {
  --sd-btn-secondary-color: var(--sd-accent);
}

/* Slightly smaller text on phones */
@media (max-width: 575.98px) {
  :root {
    --sd-btn-font-size: 1.125rem;
  }
}

/* ------------------------------------------------------------------ Shape (shared by every role) */

:is(.sd-home, .sd-pp, .sd-plans, .sd-blog, .sd-post, .sd-event) .btn-lg:not(.google-analytics-whatsapp),
.sd-blog #show-more-articles {
  font-size: var(--sd-btn-font-size);
  font-weight: var(--sd-btn-font-weight);
  line-height: var(--sd-btn-line-height);
  padding: var(--sd-btn-padding-y) var(--sd-btn-padding-x);
  border-width: var(--sd-btn-border-width);
  border-style: solid;
  border-radius: var(--sd-btn-radius);
  transition: var(--sd-btn-transition);
}

/* ------------------------------------------------------------------ Secondary */

:is(.sd-home, .sd-pp, .sd-plans, .sd-post, .sd-event) .btn.google-analytics-calendly,
.sd-home a.btn[href*="blog"],
.sd-blog #show-more-articles {
  color: var(--sd-btn-secondary-color);
  background-color: transparent;
  border-color: var(--sd-btn-secondary-color);
}

:is(.sd-home, .sd-pp, .sd-plans, .sd-post, .sd-event) .btn.google-analytics-calendly:is(:hover, :focus-visible, :active),
.sd-home a.btn[href*="blog"]:is(:hover, :focus-visible, :active),
.sd-blog #show-more-articles:is(:hover, :focus-visible, :active) {
  color: var(--sd-btn-secondary-color-hover);
  background-color: var(--sd-btn-secondary-color);
  border-color: var(--sd-btn-secondary-color);
}

/* ------------------------------------------------------------------ Primary */

:is(.sd-home, .sd-pp, .sd-plans, .sd-post, .sd-event) .btn:is([href*="register/plan"], [data-bs-target="#plansFilterModal"], [data-bs-target="#startFreeTrialModal"], [data-bs-target="#lisbonTicketsModal"], [href*="forms.gle"]),
.sd-pp .sd-pp-team .btn.google-analytics-calendly,
.sd-home .lp-bg-gray-900 .btn.google-analytics-calendly {
  color: var(--sd-btn-primary-color);
  background-color: var(--sd-btn-primary-bg);
  border-color: var(--sd-btn-primary-bg);
}

:is(.sd-home, .sd-pp, .sd-plans, .sd-post, .sd-event) .btn:is([href*="register/plan"], [data-bs-target="#plansFilterModal"], [data-bs-target="#startFreeTrialModal"], [data-bs-target="#lisbonTicketsModal"], [href*="forms.gle"]):is(:hover, :focus-visible, :active),
.sd-pp .sd-pp-team .btn.google-analytics-calendly:is(:hover, :focus-visible, :active),
.sd-home .lp-bg-gray-900 .btn.google-analytics-calendly:is(:hover, :focus-visible, :active) {
  color: var(--sd-btn-primary-color);
  background-color: var(--sd-btn-primary-bg-hover);
  border-color: var(--sd-btn-primary-bg-hover);
}

/* ------------------------------------------------------------------ Focus (keyboard) */

:is(.sd-home, .sd-pp, .sd-plans, .sd-blog, .sd-post, .sd-event) .btn:focus-visible {
  outline: 0;
  box-shadow: var(--sd-btn-focus-ring);
}

@media (prefers-reduced-motion: reduce) {
  :is(.sd-home, .sd-pp, .sd-plans, .sd-blog, .sd-post, .sd-event) .btn {
    transition: none;
  }
}