/* ───────────────────────────────────────────────
   Zizania — Buttons (reusable component)
   Design system: "The Curated Earth"
   ─────────────────────────────────────────────── */

.zz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 0;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-sans);
    font-weight: 700;
    line-height: 1;
}

/* Size variants */
.zz-btn--sm { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
.zz-btn--md { padding: 0.875rem 1.75rem; font-size: 1rem; }
.zz-btn--lg { padding: 1rem 2.5rem;   font-size: 1.125rem; }

/* Shape variants */
.zz-btn--pill   { border-radius: var(--radius-full); }
.zz-btn--rounded { border-radius: var(--radius-md); }

/* PRIMARY — solid lime, dark text. No gradients per design system. */
.zz-btn--primary {
    background-color: var(--primary);
    color: var(--on-primary);
    transition: background-color var(--transition-base), transform 150ms ease-out;
}
.zz-btn--primary:hover,
.zz-btn--primary:focus-visible {
    background-color: #c5c853;
    color: var(--on-primary);
}
.zz-btn--primary:active { transform: scale(0.97); }

/* SECONDARY — mint background. For lower-priority actions. */
.zz-btn--secondary {
    background-color: var(--secondary);
    color: var(--on-secondary);
    transition: background-color var(--transition-base), transform 150ms ease-out;
}
.zz-btn--secondary:hover,
.zz-btn--secondary:focus-visible {
    background-color: #7bc5d2;
    color: var(--on-secondary);
}
.zz-btn--secondary:active { transform: scale(0.97); }

/* TERTIARY — text button with hand-drawn underline. No background. */
.zz-btn.zz-btn--tertiary {
    background: transparent;
    color: var(--on-surface);
    padding: 0.25rem 0;
    border-bottom: 2px solid var(--primary);
    border-radius: 0;
    transition: background-color var(--transition-base);
    text-decoration: none;
}
.zz-btn.zz-btn--tertiary:hover,
.zz-btn.zz-btn--tertiary:focus-visible {
    background-color: rgba(214, 217, 100, 0.15);
    color: var(--on-surface);
    text-decoration: none;
}

/* Accessibility — keyboard focus ring (uses design system primary) */
.zz-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .zz-btn { transition: none; }
    .zz-btn:active { transform: none; }
}