/*
Buttons - Button component styles for Snacked AI
Includes primary, outline, and size variations
*/

/* ========== BASE BUTTON ========== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-family: var(--font-body);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    font-size: var(--text-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-xl);
    border: none;
    cursor: pointer;
    transition: all var(--transition-bounce);
    text-decoration: none;
    white-space: nowrap;
    user-select: none;
}

/* Hover effect - lift up */
.btn:hover {
    transform: translateY(-2px);
}

/* Active/pressed state */
.btn:active {
    transform: translateY(0);
}

/* Focus state for keyboard navigation */
.btn:focus-visible {
    outline: 3px solid var(--primary);
    outline-offset: 2px;
}

/* ========== PRIMARY BUTTON ========== */
/* Blue background, white text */
.btn-primary {
    background-color: var(--primary);
    color: var(--primary-foreground);
}

.btn-primary:hover {
    background-color: hsl(223, 82%, 45%); /* Slightly darker blue #1d56e8 */
    box-shadow: var(--shadow-glow);
}

/* ========== OUTLINE BUTTON ========== */
/* White background, black text, no border */
.btn-outline {
    background-color: var(--card);
    color: var(--foreground);
}

.btn-outline:hover {
    background-color: var(--foreground);
    color: var(--card);
}

/* ========== SECONDARY BUTTON ========== */
/* Green background */
.btn-secondary {
    background-color: var(--secondary);
    color: var(--secondary-foreground);
}

.btn-secondary:hover {
    background-color: hsl(154, 90%, 30%); /* Darker green #09a964 */
}

/* ========== SIZE VARIATIONS ========== */

/* Large button */
.btn-large {
    font-size: var(--text-base);
    padding: var(--space-lg) var(--space-2xl);
}

/* Small button */
.btn-small {
    font-size: var(--text-xs);
    padding: var(--space-sm) var(--space-lg);
}

/* Full width button */
.btn-full-width {
    width: 100%;
}

/* ========== BUTTON WITH ICON ========== */
/* Button with arrow or other icon */
.btn-with-arrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.btn-arrow {
    transition: transform var(--transition-base);
}

.btn-with-arrow:hover .btn-arrow {
    transform: translateX(4px);
}

/* ========== DISABLED STATE ========== */
.btn:disabled,
.btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .btn {
        font-size: var(--text-xs);
        padding: var(--space-sm) var(--space-lg);
    }
    
    .btn-large {
        font-size: var(--text-sm);
        padding: var(--space-md) var(--space-xl);
    }
}