/**
 * SM-HS system button pattern (brand identity: circuit / pink→purple grad / compact radius).
 *
 * Use everywhere (admin, family, student, marketing can alias):
 *   Primary   .hs-btn.hs-btn-primary   - special gradient CTA (opt-in only)
 *   Secondary .hs-btn.hs-btn-secondary - lower emphasis (cancel, view, secondary nav)
 *   Alert     .hs-btn.hs-btn-alert     - critical / destructive (delete, block, revoke)
 *   Utility   .hs-grad-btn             - any element using brand gradient + invert hover
 *
 * Optional size: .hs-btn-sm
 * Optional block: .hs-btn-block
 *
 * Gradient is NEVER applied to bare <button> / links. Legacy admin/family markup may use
 * .btn or .ad-btn for primary CTAs; row actions and compact controls stay plain.
 *
 * Gradient invert (all brand CTAs): rest pink→purple; hover slides to inverted ends.
 * Tokens also live on :root via hs-base.css for shells that skip this kit.
 */

:root {
    --hs-btn-font: "Chakra Petch", "Segoe UI", sans-serif;
    --hs-btn-radius: 5px;
    --hs-btn-ink: #0c0e14;
    --hs-btn-line: #cfd5e4;
    --hs-btn-pink: #ff2d6f;
    --hs-btn-magenta: #e11d8c;
    --hs-btn-purple: #7c3aed;
    --hs-btn-violet: #5b21b6;
    /* Static strip (icons, text fill). Prefer --hs-grad-flow for clickable CTAs. */
    --hs-btn-grad: linear-gradient(90deg, #ff2d6f 0%, #a855f7 55%, #7c3aed 100%);
    /* Invertible CTA strip (palindrome + background-position slide) */
    --hs-grad-flow: linear-gradient(
        90deg,
        #ff2d6f 0%,
        #a855f7 25%,
        #7c3aed 50%,
        #a855f7 75%,
        #ff2d6f 100%
    );
    --hs-grad-flow-size: 200% 100%;
    --hs-grad-flow-pos: 0% 50%;
    --hs-grad-flow-pos-hover: 100% 50%;
    --hs-grad-flow-duration: 0.4s ease;
    --hs-btn-glow: 0 0 16px rgba(255, 45, 111, 0.28), 0 0 28px rgba(124, 58, 237, 0.14);
    --hs-btn-alert: #c4124a;
    --hs-btn-alert-hover: #9f0e3c;
    --hs-btn-alert-soft: rgba(255, 45, 111, 0.1);
}

.hs-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.65rem 1.15rem;
    border: 1.5px solid transparent;
    border-radius: var(--hs-btn-radius);
    font-family: var(--hs-btn-font);
    font-size: 0.92rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease,
        background-position var(--hs-grad-flow-duration),
        border-color 0.15s ease,
        color 0.15s ease,
        filter 0.15s ease;
}

.hs-btn:hover {
    text-decoration: none;
    transform: translateY(-1px);
}

.hs-btn:focus-visible {
    outline: 2px solid var(--hs-btn-purple);
    outline-offset: 2px;
}

.hs-btn:disabled,
.hs-btn.is-disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    pointer-events: none;
}

/**
 * Shared brand gradient CTA mechanics (opt-in only).
 * Use .hs-btn-primary, .mk-btn-primary, or .hs-grad-btn. Do not auto-apply to bare buttons.
 */
.hs-btn-primary,
.mk-btn-primary,
.mk-btn-primary:link,
.mk-btn-primary:visited,
.mk-btn-primary:focus,
.mk-btn-primary:focus-visible,
.mk-btn-primary:active,
.hs-grad-btn {
    background-color: var(--hs-btn-purple);
    background-image: var(--hs-grad-flow);
    background-size: var(--hs-grad-flow-size);
    background-position: var(--hs-grad-flow-pos);
    background-repeat: no-repeat;
    color: #fff;
}

.hs-btn-primary {
    border-color: transparent;
    box-shadow: 0 8px 22px rgba(124, 58, 237, 0.28), var(--hs-btn-glow);
}

.hs-btn-primary:hover,
.mk-btn-primary:hover,
.hs-grad-btn:hover {
    color: #fff;
    background-position: var(--hs-grad-flow-pos-hover);
    filter: none;
}

.hs-btn-primary:hover {
    box-shadow: 0 10px 26px rgba(255, 45, 111, 0.32), var(--hs-btn-glow);
}

.hs-btn-primary:focus-visible {
    outline-color: var(--hs-btn-pink);
}

/* Secondary: lower importance */
.hs-btn-secondary {
    background: #fff;
    background-image: none;
    color: var(--hs-btn-violet);
    border-color: var(--hs-btn-line);
    box-shadow: none;
}

.hs-btn-secondary:hover {
    color: var(--hs-btn-magenta);
    border-color: var(--hs-btn-pink);
    background: #fff;
    background-image: none;
    box-shadow: 0 0 0 1px rgba(255, 45, 111, 0.22);
    filter: none;
}

/* Alert — critical / destructive */
.hs-btn-alert {
    background: var(--hs-btn-alert);
    background-image: none;
    color: #fff;
    border-color: transparent;
    box-shadow: 0 8px 20px rgba(196, 18, 74, 0.28);
}

.hs-btn-alert:hover {
    color: #fff;
    background: var(--hs-btn-alert-hover);
    background-image: none;
    filter: none;
    box-shadow: 0 10px 24px rgba(196, 18, 74, 0.36);
}

.hs-btn-alert:focus-visible {
    outline-color: var(--hs-btn-alert);
}

/* Outline alert (dense tables: less visual weight, still dangerous) */
.hs-btn-alert.is-outline,
.hs-btn-alert-outline {
    background: var(--hs-btn-alert-soft);
    background-image: none;
    color: var(--hs-btn-alert);
    border-color: rgba(255, 45, 111, 0.45);
    box-shadow: none;
}

.hs-btn-alert.is-outline:hover,
.hs-btn-alert-outline:hover {
    background: rgba(255, 45, 111, 0.16);
    background-image: none;
    color: var(--hs-btn-alert-hover);
    border-color: var(--hs-btn-pink);
}

/* Size / layout */
.hs-btn-sm {
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    gap: 0.3rem;
}

.hs-btn-block {
    display: flex;
    width: 100%;
}

.hs-btn-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
}

@media (prefers-reduced-motion: reduce) {
    .hs-btn,
    .hs-btn:hover {
        transition: none;
        transform: none;
    }

    .hs-btn-primary,
    .hs-btn-primary:hover,
    .mk-btn-primary,
    .mk-btn-primary:hover,
    .hs-grad-btn,
    .hs-grad-btn:hover {
        background-position: var(--hs-grad-flow-pos);
        transition: none;
    }
}

@media (forced-colors: active) {
    .hs-btn {
        border: 1px solid ButtonText;
    }

    .hs-btn-primary,
    .hs-btn-alert {
        background: ButtonFace;
        color: ButtonText;
        forced-color-adjust: none;
    }

    .hs-btn-secondary {
        background: Canvas;
        color: ButtonText;
    }
}