/**
 * Button system — `.ts-btn` (visual system 2026-09, S5c W1)
 *
 * One vocabulary for every control we author: primary (the single filled
 * gold per view), secondary (outlined gold), ghost (outlined muted), danger.
 * Opt-in by class; vendor buttons keep the global rule in theme-core.css
 * (which excludes .ts-btn) until S4b rewrites it.
 *
 * @package TicketSystemTango
 */

.ts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ts-space-2);
    box-sizing: border-box;
    min-height: var(--ts-tap);
    padding: 0 var(--ts-space-5);
    border: 1px solid transparent;
    border-radius: var(--ts-radius-sm);
    background: transparent;
    font-family: var(--font-body);
    font-size: var(--ts-fs-md);
    font-weight: var(--ts-fw-semibold);
    line-height: var(--ts-lh-tight);
    letter-spacing: var(--ts-ls-caps);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
    transition:
        background-color var(--ts-transition-fast) var(--ts-ease-out),
        border-color var(--ts-transition-fast) var(--ts-ease-out),
        color var(--ts-transition-fast) var(--ts-ease-out),
        box-shadow var(--ts-transition-fast) var(--ts-ease-out),
        transform var(--ts-transition-fast) var(--ts-ease-out);
}

.ts-btn:hover,
.ts-btn:focus-visible {
    opacity: 1; /* theme-core dims every a:hover */
    text-decoration: none;
}

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

.ts-btn:active {
    transform: scale(0.98);
}

/* ── Variants ── */
.ts-btn--primary {
    background: var(--ts-gold);
    border-color: var(--ts-gold);
    color: var(--ts-black);
}

.ts-btn--primary:hover,
.ts-btn--primary:focus-visible {
    background: var(--ts-gold-hover);
    border-color: var(--ts-gold-hover);
    color: var(--ts-black);
}

.ts-btn--secondary {
    background: transparent;
    border-color: var(--ts-gold);
    color: var(--ts-gold);
}

.ts-btn--secondary:hover,
.ts-btn--secondary:focus-visible {
    background: var(--ts-gold-soft);
    color: var(--ts-gold-hover);
    border-color: var(--ts-gold-hover);
}

.ts-btn--ghost {
    background: transparent;
    border-color: var(--ts-border-color);
    color: var(--ts-on-surface-muted);
}

.ts-btn--ghost:hover,
.ts-btn--ghost:focus-visible {
    color: var(--ts-on-surface);
    border-color: rgba(255, 255, 255, 0.3);
}

.ts-btn--danger {
    background: var(--ts-danger-surface);
    border-color: var(--ts-danger-surface);
    color: #ffffff;
}

.ts-btn--danger:hover,
.ts-btn--danger:focus-visible {
    background: #a52233;
    border-color: #a52233;
    color: #ffffff;
}

/* ── Sizes / layout ── */
.ts-btn--sm {
    min-height: 36px;
    padding: 0 var(--ts-space-4);
    font-size: var(--ts-fs-sm);
}

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

.ts-btn--icon {
    width: var(--ts-tap);
    padding: 0;
}

.ts-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Disabled: dark gold wash + 85% gold text (the round-3 style), never opacity alone ── */
.ts-btn:disabled,
.ts-btn[aria-disabled="true"],
.ts-btn.is-disabled {
    background: rgba(198, 166, 100, 0.18);
    border-color: transparent;
    color: rgba(198, 166, 100, 0.85);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}