/**
 * Shared CTA shadow + hover/active motion (matches pricing plan buttons).
 * Component classes keep their own colors, borders, and typography.
 */
:root {
    --cta-shadow-color: #18181b;
}

.auth-btn.auth-btn--primary,
.auth-btn.auth-btn--google,
.onboarding-btn,
.onboarding-signout-btn,
.onboarding-offering-edit,
.onboarding-offering-delete,
.dashboard-card-action,
.dashboard-inline-cta,
.dashboard-home-link,
.contact-nav-auth,
.contact-submit,
.landing-cta,
a.landing-cta.shadow-brand-lime,
.pricing-cta,
div.flex.items-center.gap-2.shrink-0 > a.rounded-full {
    transition: all 0.3s ease;
    box-shadow: 4px 4px 0 0 var(--cta-shadow-color);
}

.auth-btn.auth-btn--primary:not(:disabled):hover,
.auth-btn.auth-btn--google:hover,
.onboarding-btn:not(:disabled):hover,
.onboarding-signout-btn:hover,
.onboarding-offering-edit:hover,
.onboarding-offering-delete:hover,
.dashboard-card-action:hover,
.dashboard-inline-cta:hover,
.dashboard-home-link:hover,
.contact-nav-auth:hover,
.contact-submit:not(:disabled):hover,
.landing-cta:hover,
a.landing-cta.shadow-brand-lime:hover,
.pricing-cta:not(:disabled):hover,
div.flex.items-center.gap-2.shrink-0 > a.rounded-full:hover {
    box-shadow: 6px 6px 0 0 var(--cta-shadow-color);
    transform: translate(-2px, -2px);
}

.auth-btn.auth-btn--primary:not(:disabled):active,
.auth-btn.auth-btn--google:active,
.onboarding-btn:not(:disabled):active,
.onboarding-signout-btn:active,
.onboarding-offering-edit:active,
.onboarding-offering-delete:active,
.dashboard-card-action:active,
.dashboard-inline-cta:active,
.dashboard-home-link:active,
.contact-nav-auth:active,
.contact-submit:not(:disabled):active,
.landing-cta:active,
a.landing-cta.shadow-brand-lime:active,
.pricing-cta:not(:disabled):active,
div.flex.items-center.gap-2.shrink-0 > a.rounded-full:active {
    box-shadow: 2px 2px 0 0 var(--cta-shadow-color);
    transform: translate(2px, 2px);
}

.onboarding-btn:disabled,
.pricing-cta:disabled {
    box-shadow: 4px 4px 0 0 var(--cta-shadow-color);
}

.onboarding-btn:disabled:hover,
.pricing-cta:disabled:hover {
    transform: none;
    box-shadow: 4px 4px 0 0 var(--cta-shadow-color);
}