/* ============================================
   Button – Block Component
   Variants: primary, secondary, affiliate
   ============================================ */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-hand);
    transition: transform var(--transition-bounce), box-shadow var(--transition-bounce);
}

/* Bounce feedback on click */
.btn:active {
    transform: scale(0.98) translate(2px, 2px);
    box-shadow: none !important;
}

/* ---- Primary: Otto Green ---- */

.btn--primary {
    background-color: var(--color-otto-green);
    color: var(--color-white);
    border: 2px solid var(--color-otto-dark);
    box-shadow: 4px 4px 0px 0px var(--color-otto-dark);
}

.btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 4px 6px 0px 0px var(--color-otto-dark);
}

/* ---- Secondary: Sun Yellow wash ---- */

.btn--secondary {
    background-color: var(--color-wash-yellow);
    color: var(--color-ink);
    border: 2px solid var(--color-ink-20);
    box-shadow: 4px 4px 0px 0px var(--color-sun-yellow);
}

.btn--secondary:hover {
    transform: translateY(-2px);
    box-shadow: 4px 6px 0px 0px var(--color-sun-yellow);
}

/* ---- Affiliate: Papa Rust ---- */

.btn--affiliate {
    background-color: var(--color-papa-rust);
    color: var(--color-white);
    border: 2px solid var(--color-papa-rust);
    box-shadow: 4px 4px 0px 0px var(--color-papa-rust-40);
}

.btn--affiliate:hover {
    transform: translateY(-2px);
    box-shadow: 4px 6px 0px 0px var(--color-papa-rust-40);
}