/**
 * Buttons — Fungiverse (Seed.com aesthetic)
 * Pill-shaped, minimal, elegant.
 */

/* Base */
.fv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 32px;
    border: 1.5px solid transparent;
    border-radius: 999px;
    font-family: var(--fv-font-body);
    font-size: 0.9375rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color 200ms ease,
        color 200ms ease,
        border-color 200ms ease,
        transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    white-space: nowrap;
}

/* Primary — Dark (Seed default) */
.fv-btn--primary {
    background: #0d0d0d;
    color: #fff;
    border-color: #0d0d0d;
}
.fv-btn--primary:hover,
.fv-btn--primary:focus-visible {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Accent — Red Fungiverse */
.fv-btn--accent {
    background: var(--fv-primary);
    color: #fff;
    border-color: var(--fv-primary);
}
.fv-btn--accent:hover,
.fv-btn--accent:focus-visible {
    background: var(--fv-primary-dark);
    border-color: var(--fv-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(232, 77, 68, 0.25);
}

/* Outline / Secondary */
.fv-btn--outline,
.fv-btn--secondary {
    background: transparent;
    color: #0d0d0d;
    border: 1.5px solid #0d0d0d;
}
.fv-btn--outline:hover,
.fv-btn--outline:focus-visible,
.fv-btn--secondary:hover,
.fv-btn--secondary:focus-visible {
    background: #0d0d0d;
    color: #fff;
    transform: translateY(-1px);
}

/* Ghost — for dark backgrounds */
.fv-btn--ghost {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,0.4);
    color: #fff;
}
.fv-btn--ghost:hover,
.fv-btn--ghost:focus-visible {
    background: rgba(255,255,255,0.1);
    border-color: rgba(255,255,255,0.7);
    transform: translateY(-1px);
}

/* Outline light (for dark backgrounds) */
.fv-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, 0.4);
}
.fv-btn--outline-light:hover,
.fv-btn--outline-light:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-1px);
}

/* Sizes */
.fv-btn--large {
    padding: 16px 40px;
    font-size: 1rem;
}
.fv-btn--small {
    padding: 10px 20px;
    font-size: 0.8125rem;
}

/* Focus accesible */
.fv-btn:focus-visible {
    outline: 2px solid var(--fv-primary);
    outline-offset: 3px;
}

/* Disabled */
.fv-btn:disabled,
.fv-btn[aria-disabled="true"] {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Pill compact — for inline uses */
.fv-btn--pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 999px;
    padding: 10px 22px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: var(--fv-font-body);
    letter-spacing: 0.02em;
    background: #0d0d0d;
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 200ms ease;
    text-decoration: none;
    white-space: nowrap;
}

.fv-btn--pill:hover {
    background: #1a1a1a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.fv-btn--pill-outline {
    background: transparent;
    color: #0d0d0d;
    border: 1.5px solid #0d0d0d;
}

.fv-btn--pill-outline:hover {
    background: #0d0d0d;
    color: #fff;
}