/*
 * ss-btn — Buttons
 *
 * Variants:  --primary (accent bg), --secondary (outline), --ghost (text only), --danger
 * Sizes:     --sm, (default), --lg
 * States:    :hover, :active, :disabled, [aria-busy="true"]
 * Modifiers: --block (full width), --icon-only
 *
 * Mobile-first: default size = comfortable for touch (min 40px tall).
 */

.ss-btn {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Sizing (default = medium, touch-friendly) */
    min-height: 40px;
    padding: 0 var(--space-4);

    /* Typography */
    font-family: var(--font-sans);
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;

    /* Shape */
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;

    /* Behaviour */
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
    user-select: none;

    /* Reset */
    appearance: none;
    -webkit-appearance: none;
}

.ss-btn:active { transform: translateY(1px); }

.ss-btn:disabled,
.ss-btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.5;
    pointer-events: none;
}

.ss-btn[aria-busy="true"] { cursor: wait; opacity: 0.7; }

/* ── Variants ─────────────────────────────────────────────────── */

.ss-btn--primary {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.ss-btn--primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.ss-btn--secondary {
    background: transparent;
    color: var(--accent-text);
    border-color: var(--accent-border);
}
.ss-btn--secondary:hover {
    background: var(--accent-soft);
    border-color: var(--accent);
    color: var(--accent);
}

.ss-btn--ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.ss-btn--ghost:hover {
    background: var(--bg-row-hover);
    color: var(--text-primary);
}

.ss-btn--danger {
    background: var(--danger);
    color: #fff;
    border-color: var(--danger);
}
.ss-btn--danger:hover { filter: brightness(0.92); }

/* ── Sizes ────────────────────────────────────────────────────── */

.ss-btn--sm {
    min-height: 32px;
    padding: 0 var(--space-3);
    font-size: var(--text-sm);
    border-radius: var(--radius-sm);
    gap: var(--space-1);
}

.ss-btn--lg {
    min-height: 48px;
    padding: 0 var(--space-6);
    font-size: var(--text-md);
    border-radius: var(--radius-md);
}

/* ── Modifiers ────────────────────────────────────────────────── */

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

.ss-btn--icon-only {
    width: 40px;
    padding: 0;
}
.ss-btn--icon-only.ss-btn--sm { width: 32px; }
.ss-btn--icon-only.ss-btn--lg { width: 48px; }

/* Icon inside a button — inherits currentColor */
.ss-btn .ss-icon { width: 16px; height: 16px; }
.ss-btn--lg .ss-icon { width: 18px; height: 18px; }
.ss-btn--sm .ss-icon { width: 14px; height: 14px; }

/* ── Focus ring (accessibility) ───────────────────────────────── */

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