/* ============================================
   Button Component System
   ============================================ */

/* Base Button Class */
.btn {
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: var(--font-size-sm);
    font-weight: 500;
    border-radius: var(--radius);
    outline: none;
}

.btn:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
    transform: none !important;
}

/* ============================================
   Button Variants
   ============================================ */

/* Primary Button */
.btn-primary {
    padding: 0.625rem 1.25rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
}

.btn-primary:hover:not(:disabled) {
    background: hsl(var(--primary) / 0.9);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
    padding: 0.625rem 1.25rem;
    background: hsl(var(--secondary));
    color: hsl(var(--secondary-foreground));
}

.btn-secondary:hover:not(:disabled) {
    background: hsl(var(--secondary) / 0.8);
}

/* Ghost Button (Transparent) */
.btn-ghost {
    padding: var(--space-1);
    background: transparent;
    color: hsl(var(--muted-foreground));
}

.btn-ghost:hover:not(:disabled) {
    background: hsl(var(--muted) / var(--opacity-muted));
    color: hsl(var(--foreground));
}

/* ============================================
   Button Sizes
   ============================================ */

/* Icon Button */
.btn-icon {
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}

/* Small Button */
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--font-size-xs);
}

/* Large Button */
.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--font-size-lg);
}

/* ============================================
   Button Color Variants
   ============================================ */

/* Destructive Button */
.btn-destructive:hover:not(:disabled) {
    background: hsl(var(--destructive) / var(--opacity-light));
    color: hsl(var(--destructive));
}

/* Success Button */
.btn-success {
    background: hsl(var(--success));
    color: hsl(var(--success-foreground));
}

.btn-success:hover:not(:disabled) {
    background: hsl(var(--success) / 0.9);
}

/* ============================================
   Special Button Types
   ============================================ */

/* Floating Action Button (FAB) */
.btn-fab {
    position: fixed;
    bottom: var(--space-8);
    right: var(--space-8);
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    box-shadow: var(--shadow-lg);
    z-index: var(--z-fixed);
}

.btn-fab:hover:not(:disabled) {
    transform: scale(1.05);
    box-shadow: 0 12px 20px -5px rgba(0, 0, 0, 0.2);
}

.btn-fab:active:not(:disabled) {
    transform: scale(0.95);
}

/* ============================================
   Button Groups
   ============================================ */

.btn-group {
    display: inline-flex;
    gap: var(--space-2);
}

.btn-group .btn {
    margin: 0;
}

/* ============================================
   Accessibility
   ============================================ */

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

/* ============================================
   Mobile Optimizations
   ============================================ */

@media (max-width: 640px) {
    .btn-fab {
        bottom: var(--space-6);
        right: var(--space-6);
        bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
    }
}