/* --- Landing buttons «Кнопки · Лендинг» ---
   Figma «Lidfly дизайн-система» → Кнопки · Лендинг (30.09.2026). Capsule on the colours of the
   shared button system; the page markup keeps its own classes. This file owns the palette and
   size of these classes: page CSS may place them, never repaint them (test-button-system).
   Filled is the one main action of a zone, Tinted the second, Gray working actions.
   Dark zones and photos: the main action turns Tinted, the second Glass.
   Selectors start with :root so this layer also wins over inline styles of generated pages. */

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline) {
  --btn-height: 48px;
  --btn-pad-x: 24px;
  --btn-gap: 8px;
  --btn-icon: 20px;
  --btn-font-size: var(--btn-font-l);
}

/* Gray first: modifiers below override the base .agency-action. */
:root :is(
  .agency-action,
  .wbtn-light,
  .agency-action--light
) {
  --btn-fg: var(--btn-gray-fg);
  --btn-top: var(--btn-gray-bg-top);
  --btn-bottom: var(--btn-gray-bg-bottom);
  --btn-border-color: var(--btn-gray-border);
  --btn-shadow: var(--btn-shadow-soft);
  --btn-shadow-hover: var(--btn-shadow-soft);
  --btn-shadow-focus: var(--btn-shadow-soft-focus);
  --btn-hover-overlay: var(--color-state-hover-on-light);
  --btn-pressed-overlay: var(--color-state-pressed-on-light);
}

:root :is(
  .cta-btn,
  .wbtn-primary,
  .wbtn-glow,
  .nav-btn,
  .nav-cta,
  .cg-nav__cta,
  .sl-header__cta,
  .site-footer__cta,
  .agency-action--dark,
  .agency-action--aurora,
  .agtrust-cta,
  .start-card__cta
) {
  --btn-fg: var(--btn-filled-fg);
  --btn-top: var(--btn-filled-bg-top);
  --btn-bottom: var(--btn-filled-bg-bottom);
  --btn-border-color: var(--btn-filled-border);
  --btn-shadow: var(--btn-shadow-filled);
  --btn-shadow-hover: var(--btn-shadow-filled-hover);
  --btn-shadow-focus: var(--btn-shadow-filled-focus);
  --btn-hover-overlay: var(--color-state-hover-on-dark);
  --btn-pressed-overlay: var(--color-state-pressed-on-dark);
}

:root :is(
  .cta-btn-secondary,
  .tools-banner-btn,
  .start-connect__cta,
  .geo-button
),
:root :is(.cg-band, .sec-dark, .final-panel, .pro-cta, .geo-hero, .geo-section--dark, .agency-hero, .agency-join, .agency-brief-dock, .lf-dark) :is(
  .cta-btn,
  .wbtn-primary,
  .wbtn-glow,
  .nav-btn,
  .nav-cta,
  .cg-nav__cta,
  .sl-header__cta,
  .site-footer__cta,
  .agency-action--dark,
  .agency-action--aurora,
  .agtrust-cta,
  .start-card__cta,
  .btn-primary,
  .btn-forest,
  .btn-filled
) {
  --btn-fg: var(--btn-tinted-fg);
  --btn-top: var(--btn-tinted-bg-top);
  --btn-bottom: var(--btn-tinted-bg-bottom);
  --btn-border-color: var(--btn-tinted-border);
  --btn-shadow: var(--btn-shadow-soft);
  --btn-shadow-hover: var(--btn-shadow-soft);
  --btn-shadow-focus: var(--btn-shadow-soft-focus);
  --btn-hover-overlay: var(--color-state-hover-on-light);
  --btn-pressed-overlay: var(--color-state-pressed-on-light);
}

:root :is(
  .wbtn-ghost,
  .agency-action--glass,
  .geo-button--outline
),
:root :is(.cg-band, .sec-dark, .final-panel, .pro-cta, .geo-hero, .geo-section--dark, .agency-hero, .agency-join, .agency-brief-dock, .lf-dark) :is(
  .wbtn-ghost,
  .agency-action--glass,
  .geo-button--outline,
  .btn-outline-forest,
  .btn-secondary,
  .btn-tinted,
  .btn-gray
) {
  --btn-fg: var(--btn-glass-fg);
  --btn-top: var(--btn-glass-bg);
  --btn-bottom: var(--btn-glass-bg);
  --btn-border-color: var(--btn-glass-border);
  --btn-shadow: var(--btn-shadow-glass);
  --btn-shadow-hover: var(--btn-shadow-glass);
  --btn-shadow-focus: var(--btn-shadow-glass);
  --btn-hover-overlay: var(--color-state-hover-on-dark);
  --btn-pressed-overlay: var(--color-state-pressed-on-dark);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Sizes: header actions M 40, first-screen actions XL 56, everything else L 48. */
:root :is(.nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta) {
  --btn-height: 40px;
  --btn-pad-x: 16px;
  --btn-icon: 18px;
  --btn-font-size: var(--btn-font-m);
}

:root :is(.cta-btn, .cta-btn-secondary, .wbtn-lg, .geo-hero .geo-button) {
  --btn-height: 56px;
  --btn-pad-x: 32px;
}

:root :is(.home-sticky-cta, .video-lesson-actions, .article) :is(.cta-btn, .cta-btn-secondary),
:root :is(.agency-hero__actions, .geo-mobile-bar) :is(.agency-action, .geo-button) {
  --btn-height: 48px;
  --btn-pad-x: 24px;
}

:root :is(.agency-card__actions, .agency-brief-dock) .agency-action {
  --btn-height: 40px;
  --btn-pad-x: 16px;
  --btn-icon: 18px;
  --btn-font-size: var(--btn-font-m);
}

/* Paint. States only swap variables; listing them here outranks page hover rules. */
:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline),
:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline):is(:hover, :active, :focus-visible) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  min-height: var(--btn-height);
  padding: 6px var(--btn-pad-x);
  border: 1px solid var(--btn-border-color);
  border-radius: var(--radius-pill);
  background-color: transparent;
  background-image:
    linear-gradient(var(--btn-overlay, transparent), var(--btn-overlay, transparent)),
    linear-gradient(180deg, var(--btn-top), var(--btn-bottom));
  color: var(--btn-fg);
  box-shadow: var(--btn-shadow-state, var(--btn-shadow));
  font-family: var(--font-sans);
  font-size: var(--btn-font-size);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: none;
  transition-property: transform, box-shadow, background-color, color, border-color;
  transition-duration: var(--btn-release-duration), 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: var(--btn-release-ease), ease, ease, ease, ease;
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline) :is(svg, img) {
  width: var(--btn-icon);
  height: var(--btn-icon);
  flex-shrink: 0;
}

@media (hover: hover) {
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline):hover {
    --btn-overlay: var(--btn-hover-overlay);
    --btn-shadow-state: var(--btn-shadow-hover);
  }
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline):active {
  --btn-top: var(--btn-bottom);
  --btn-overlay: var(--btn-pressed-overlay);
  --btn-shadow-state: var(--btn-shadow-pressed);
  transform: scale(var(--btn-press-scale));
  transition-duration: var(--btn-press-duration), 0.2s, 0.2s, 0.2s, 0.2s;
  transition-timing-function: ease-out, ease, ease, ease, ease;
}

:root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline):focus-visible {
  outline: 3px solid var(--btn-focus-ring);
  outline-offset: 0;
  --btn-shadow-state: var(--btn-shadow-focus);
}

@media (prefers-reduced-motion: reduce) {
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline),
  :root :is(.cta-btn, .wbtn-primary, .wbtn-glow, .nav-btn, .nav-cta, .cg-nav__cta, .sl-header__cta, .site-footer__cta, .agency-action--dark, .agency-action--aurora, .agtrust-cta, .start-card__cta, .cta-btn-secondary, .tools-banner-btn, .start-connect__cta, .geo-button, .agency-action, .wbtn-light, .agency-action--light, .wbtn-ghost, .agency-action--glass, .geo-button--outline):active {
    transform: none;
    transition-property: box-shadow, background-color, color, border-color;
    transition-duration: 0.2s;
    transition-timing-function: ease;
  }
}