/* ===== Button Component ===== */
.btn,
.button {
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    border-radius: var(--border-radius-md);
    font-family: var(--font-family-base);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    transition: all var(--transition-base);
    text-decoration: none;
    display: inline-block;
    text-transform: lowercase;
}

.btn-primary,
.button-orange {
    background-color: var(--color-accent-orange);
    color: var(--color-text-primary);
}

.btn-primary:hover,
.button-orange:hover {
    background-color: var(--color-accent-orange-dark);
}

.btn-secondary,
.button-dark {
    background-color: var(--color-bg-card);
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
}

.btn-secondary:hover,
.button-dark:hover {
    background-color: var(--color-gray-medium);
    border-color: var(--color-border-light);
}

.btn-danger {
    background-color: #dc3545;
    color: var(--color-text-primary);
}

.btn-danger:hover {
    background-color: #c82333;
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-xl);
    font-size: var(--font-size-headline);
    font-weight: var(--font-weight-bold);
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-caption);
}

.btn-block {
    width: 100%;
    display: block;
}

#reset-btn {
    background-color: #dc3545;
    color: var(--color-text-primary);
    border: none;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--border-radius-md);
    cursor: pointer;
}

.download-all-btn {
    display: inline-block;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--color-accent-orange);
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: var(--border-radius-md);
    font-weight: var(--font-weight-semibold);
    transition: all var(--transition-base);
}

.download-all-btn:hover {
    background-color: var(--color-accent-orange-dark);
}