/* ========================================================================
   Component: Buttons
   ======================================================================== */

.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2);
    padding: 10px 16px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-primary);
    font-weight: var(--weight-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    cursor: pointer;
    transition: transform 60ms ease, background var(--duration-fast) var(--ease-default),
                border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.btn:focus-visible { box-shadow: var(--focus-ring); outline: none; }

.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-hover));
    color: var(--text-inverse);
    box-shadow: 0 8px 20px rgba(15, 118, 110, 0.18);
}
.btn-primary:hover { box-shadow: 0 12px 28px rgba(15, 118, 110, 0.26); }

.btn-success { background: var(--success); color: var(--text-inverse); }

.btn-danger {
    background: var(--danger-soft);
    border-color: color-mix(in srgb, var(--danger) 30%, var(--border));
    color: var(--danger);
}

.btn-outline {
    border-color: var(--border);
    background: color-mix(in srgb, var(--bg-primary) 85%, transparent);
}
.btn-outline:hover { border-color: color-mix(in srgb, var(--brand) 35%, var(--border)); }

.btn-ghost { background: transparent; border: none; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }

.btn-light { background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); }
.btn-light:hover { background: var(--bg-secondary); }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,0.6); }
.btn-outline-light:hover { background: rgba(255,255,255,0.08); }

.btn-sm { padding: 7px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); }
.btn-lg { padding: 14px 24px; font-size: var(--text-md); }

.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: var(--radius-sm);
}

.btn-group { display: inline-flex; gap: var(--space-2); }
.btn-spinner { display: inline-block; animation: spin 0.8s linear infinite; }