/* buttons.css – Button variants and sizes */

/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--btn-font-family);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: var(--btn-transition);
    border: 2px solid transparent;
    white-space: nowrap;
}

.btn:focus-visible {
    outline: var(--focus-outline);
    outline-offset: var(--focus-offset);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--btn-disabled-opacity);
    cursor: not-allowed;
    pointer-events: none;
}

/* Sizes */
.btn--sm {
    padding: var(--btn-sm-padding);
    font-size: var(--btn-sm-font);
    min-height: var(--btn-sm-height);
}

.btn--md,
.btn {
    padding: var(--btn-md-padding);
    font-size: var(--btn-md-font);
    min-height: var(--btn-md-height);
}

.btn--lg {
    padding: var(--btn-lg-padding);
    font-size: var(--btn-lg-font);
    min-height: var(--btn-lg-height);
}

/* Primary */
.btn--primary {
    background-color: var(--color-primary);
    color: var(--color-text-on-primary);
    border-color: var(--color-primary);
}

.btn--primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-primary);
}

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

/* Secondary */
.btn--secondary {
    background-color: transparent;
    color: var(--color-secondary);
    border-color: var(--color-secondary);
}

.btn--secondary:hover {
    background-color: var(--color-secondary);
    color: var(--color-white);
    transform: translateY(-1px);
}

/* Accent */
.btn--accent {
    background-color: var(--color-accent);
    color: var(--color-text-on-accent);
    border-color: var(--color-accent);
}

.btn--accent:hover {
    background-color: var(--color-accent-light);
    border-color: var(--color-accent-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
    color: var(--color-text-on-accent);
}

/* Ghost */
.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: transparent;
}

.btn--ghost:hover {
    color: var(--color-primary);
    background: rgba(45, 80, 22, 0.06);
}

/* Full Width */
@media (max-width: 767px) {
    .btn--mobile-full {
        width: 100%;
    }
}

/* Outline Light (for use on dark/photo backgrounds) */
.btn--outline-light {
    background: transparent;
    color: var(--color-text-on-dark);
    border-color: rgba(245, 240, 232, 0.7);
}

.btn--outline-light:hover {
    background: rgba(245, 240, 232, 0.15);
    border-color: var(--color-text-on-dark);
    color: var(--color-text-on-dark);
}