/* Buttons */

.btn, button.btn,
.button, a.button,
input[type="submit"], input[type="button"], button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 14px 28px;
    font-family: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    border: 1px solid var(--c-fg);
    background: var(--c-fg);
    color: var(--c-bg);
    cursor: pointer;
    user-select: none;
    transition: background var(--t-fast) var(--ease-out),
                color var(--t-fast) var(--ease-out),
                border-color var(--t-fast) var(--ease-out);
    border-radius: var(--radius);
    text-decoration: none;
}

.btn:hover, .button:hover,
input[type="submit"]:hover, input[type="button"]:hover, button[type="submit"]:hover {
    background: var(--c-bg);
    color: var(--c-fg);
    opacity: 1;
}

.btn--secondary, .btn.secondary {
    background: transparent;
    color: var(--c-fg);
}
.btn--secondary:hover {
    background: var(--c-fg);
    color: var(--c-bg);
}

.btn--ghost {
    background: transparent;
    border-color: var(--c-border-strong);
    color: var(--c-fg);
}
.btn--ghost:hover { border-color: var(--c-fg); background: transparent; color: var(--c-fg); }
a.btn.btn--ghost.btn--on-dark { color: #ffffff; }

.btn--sm { padding: 10px 18px; font-size: var(--fs-xs); }
.btn--lg { padding: 18px 36px; font-size: var(--fs-md); }
.btn--block { width: 100%; }

.btn[disabled], .button[disabled], button[disabled] {
    opacity: 0.4; cursor: not-allowed;
}