/* global reusable button styles (BEM-ish utility) */
:root {
    --btn-font-family: system-ui,-apple-system,"Segoe UI",Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
    --btn-radius-sm: .45rem;
    --btn-radius: .65rem;
    --btn-radius-lg: .9rem;
    --btn-primary-bg: #2563eb;
    --btn-primary-bg-hover: #1d4ed8;
    --btn-primary-text: #fff;
    --btn-outline-bg: #ffffff;
    --btn-outline-border: #d0d8e2;
    --btn-outline-hover: #f1f5f9;
    --btn-outline-text: #0f172a;
    --btn-dark-bg: #021742;
    --btn-dark-hover: #0e2e73;
    --btn-dark-text: #fff;
    --btn-accent-bg: #7c3aed;
    --btn-accent-hover: #6d28d9;
    --btn-accent-text: #fff;
    --btn-transition: .28s cubic-bezier(.4,0,.2,1);
    --btn-focus-ring: 0 0 0 3px rgba(37,99,235,.35);
}

.btn {
    --_bg: var(--btn-primary-bg);
    --_bg-hover: var(--btn-primary-bg-hover);
    --_color: var(--btn-primary-text);
    font-family: var(--btn-font-family);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-weight: 600;
    letter-spacing: .45px;
    text-decoration: none;
    line-height: 1.1;
    border: none;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    background: var(--_bg);
    color: var(--_color);
    border-radius: var(--btn-radius);
    transition: background var(--btn-transition), transform var(--btn-transition), box-shadow var(--btn-transition), color var(--btn-transition);
    position: relative;
    white-space: nowrap;
}

    .btn:focus-visible {
        outline: none;
        box-shadow: var(--btn-focus-ring);
    }

    .btn:hover, .btn:focus {
        background: var(--_bg-hover);
        transform: translateY(-2px);
    }

    .btn:active {
        transform: translateY(0);
    }

/* Size variants */
.btn--xs {
    font-size: .80rem;
    padding: .45rem .8rem;
    border-radius: var(--btn-radius-sm);
}

.btn--sm {
    font-size: .80rem;
    padding: .55rem .95rem;
}

.btn--md {
    font-size: .8rem;
    padding: .7rem 1.15rem;
}

.btn--lg {
    font-size: .9rem;
    padding: .9rem 1.45rem;
    border-radius: var(--btn-radius-lg);
}

/* Style variants */
.btn--primary {
    --_bg: var(--btn-primary-bg);
    --_bg-hover: var(--btn-primary-bg-hover);
    --_color: var(--btn-primary-text);
}

.btn--dark {
    --_bg: var(--btn-dark-bg);
    --_bg-hover: var(--btn-dark-hover);
    --_color: var(--btn-dark-text);
}

.btn--accent {
    --_bg: var(--btn-accent-bg);
    --_bg-hover: var(--btn-accent-hover);
    --_color: var(--btn-accent-text);
}

.btn--outline {
    --_bg: var(--btn-outline-bg);
    --_bg-hover: var(--btn-outline-hover);
    --_color: var(--btn-outline-text);
    border: 1px solid var(--btn-outline-border);
    box-shadow: 0 1px 3px rgba(15,23,42,.12),0 1px 2px rgba(15,23,42,.08);
}

    .btn--outline:hover, .btn--outline:focus {
        box-shadow: 0 3px 8px -2px rgba(15,23,42,.18);
    }

/* Subtle variant */
.btn--subtle {
    --_bg: #f1f5f9;
    --_bg-hover: #e2e8f0;
    --_color: #0f172a;
}

/* Full width helper */
.btn--block {
    width: 100%;
}

/* Icon button (square) */
.btn--icon {
    padding: .55rem;
    aspect-ratio: 1/1;
}

/* Disabled state */
.btn[disabled], .btn--disabled {
    opacity: .55;
    pointer-events: none;
}

/* Group helper */
.btn-group {
    display: inline-flex;
    gap: .6rem;
}

/* Light elevation utility */
.btn--shadow-sm {
    box-shadow: 0 2px 6px -2px rgba(0,0,0,.15),0 4px 10px -4px rgba(0,0,0,.1);
}

    .btn--shadow-sm:hover {
        box-shadow: 0 4px 14px -4px rgba(0,0,0,.18);
    }