/* =========================================
   COMPONENTS - Buttons, shared UI elements
   ========================================= */

/* Shoelace button theming */
sl-button::part(base) {
    font-family: var(--font-sans);
}

sl-button.btn-pill::part(base) {
    border-radius: 999px;
    font-weight: 600;
    padding: 0.5rem;
    letter-spacing: 0.01em;
    box-shadow: none;
}

sl-button.btn-light::part(base) {
    background: var(--sage-green);
    color: var(--forest-dark);
}

sl-button.btn-light::part(base):hover,
sl-button.btn-light::part(base):focus-visible {
    background: var(--sage-green-soft);
}

sl-button.btn-translucent::part(base) {
    background: rgba(126, 200, 148, 0.28);
    color: var(--light-rose);
    border: 1px solid rgba(244, 249, 242, 0.32);
    backdrop-filter: blur(18px);
}

sl-button.btn-translucent::part(base):hover,
sl-button.btn-translucent::part(base):focus-visible {
    background: rgba(126, 200, 148, 0.4);
}

sl-button.btn-dark::part(base) {
    color: var(--accent-contrast);
    border-radius: 16px;
    height: 3rem;
    padding: 0.5rem;
    letter-spacing: 0.01em;
    box-shadow: none;
}

sl-button.btn-dark::part(base):hover,
sl-button.btn-dark::part(base):focus-visible {
    background: var(--fern-green);
}

/* Shoelace component fallback for when not defined */
sl-button:not(:defined) {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: var(--sage-green);
    color: var(--forest-dark);
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
}