/* btn-modern.css — SCOPED `.btn-modern` rules only.
 *
 * Linked from dashboard / vendor base templates so `.btn-modern` CTAs
 * render correctly even though `style.css` cannot be loaded on those
 * surfaces. style.css has a global `button { ... }` rule that breaks
 * every Tailwind-styled button across the dashboard (see revert commit
 * aa5db5d), so we mirror the narrow `.btn-modern` rules here.
 *
 * Mirror of the .btn-modern rules in static/css/style.css:247-280.
 * Keep both in sync — public/landing surfaces still load style.css
 * directly and rely on the rules being in both places.
 *
 * Only the primary `.btn-modern` variant is included because that is
 * the only one referenced from dashboard surfaces. Add `-secondary` /
 * `-danger` here ONLY if a dashboard page starts using them.
 */

/* WCAG AA: white text on the raw brand gradient failed contrast at
 * every stop vs #fff (#8C6CFF 3.68:1, #6A9EFF 2.64:1, #48E2D9 1.60:1).
 * Since 2026-08-16 this paints --btn-brand-bg, same as .btn-brand: the
 * deep stops #7B58EA 4.74:1, #4070CD 4.75:1, #00817A 4.75:1 clear AA on
 * their own, so the dark scrim is gone. Full math notes in btn-brand.css. */
.btn-modern {
    background: var(--btn-action-bg, var(--btn-brand-bg, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)));
    color: var(--btn-action-fg, #ffffff) !important;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.6rem 1.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    box-shadow: var(--btn-action-glow, 0 14px 30px -10px rgba(106, 158, 255, 0.55));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.btn-modern:hover {
    background: var(--btn-action-hover, var(--btn-action-bg, var(--btn-brand-bg, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%))));
    box-shadow: var(--btn-action-glow-hover, 0 24px 40px -10px rgba(106, 158, 255, 0.65));
    transform: translateY(-2px);
}

.btn-modern:active {
    transform: translateY(0);
    box-shadow: var(--btn-action-glow, 0 14px 30px -10px rgba(106, 158, 255, 0.55));
}

.btn-modern svg {
    margin-right: 0.5rem;
    width: 1.25rem;
    height: 1.25rem;
}