/**
 * Button Styles
 * Taiga-Helper Design System
 *
 * All button variants: primary, secondary, danger, ghost
 */

/* ============================================
   Primary Button (Gradient)
   ============================================ */
.btn-primary {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--gradient-primary);
    color: white;
    border: none;
    border-radius: var(--radius-xl);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    color: white;
}

.btn-primary:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ============================================
   Secondary Button (Outlined)
   ============================================ */
.btn-secondary {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-card);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-xl);
    color: var(--color-primary);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background var(--transition-fast);
}

.btn-secondary:hover {
    background: var(--color-bg-hover);
    color: var(--color-primary);
}

/* ============================================
   Danger Button
   ============================================ */
.btn-danger {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-card);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-xl);
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    text-decoration: none;
    transition: all var(--transition-fast);
}

.btn-danger:hover {
    background: var(--color-error-light);
    border-color: var(--color-error);
    color: var(--color-error);
}

.btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ============================================
   Ghost/Tertiary Button
   ============================================ */
.btn-ghost {
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-section);
    border: 2px solid var(--color-border-default);
    border-radius: var(--radius-lg);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-ghost:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-default);
}