/* Button Base */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm) var(--spacing-md);
    border: none;
    border-radius: var(--border-radius-sm);
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    cursor: pointer;
    transition: all var(--transition-normal);
}

/* Button Variants */
.btn-primary {
    background-color: var(--primary-color);
    color: var(--background-color);
}

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

/* Button Sizes */
.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: calc(var(--font-size-base) * 0.875);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: calc(var(--font-size-base) * 1.25);
}

/* Button States */
.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

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