.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 16px;
    border: 1px solid var(--button-face, var(--primary));
    border-radius: var(--radius-small);
    background: var(--button-face, var(--primary));
    color: var(--button-ink, var(--primary-ink));
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.25;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}

.button:hover {
    text-decoration: none;
    background: var(--button-hover, var(--primary-hover));
    border-color: var(--button-hover, var(--primary-hover));
    color: var(--button-hover-ink, var(--primary-hover-ink));
}

.button--outline {
    background: var(--clear);
    color: var(--ink);
    border-color: var(--line-strong);
    box-shadow: none;
}

.button--outline:hover {
    background: var(--sage);
    color: var(--green);
    border-color: var(--green);
}

.button--small {
    padding-inline: 12px;
}

.button--secondary { --button-face:var(--secondary-bg); --button-ink:var(--secondary); --button-hover:var(--secondary-hover); --button-hover-ink:var(--secondary-ink); border-color:var(--secondary-border); }
.button--primary { --button-face:var(--primary); --button-hover:var(--primary-hover); --button-ink:var(--primary-ink); --button-hover-ink:var(--primary-hover-ink); }
.button--success { --button-face:var(--success); --button-hover:var(--success-hover); --button-ink:var(--success-ink); --button-hover-ink:var(--success-ink); }
.button--danger { --button-face:var(--error); --button-hover:var(--error-hover); --button-ink:var(--error-ink); --button-hover-ink:var(--error-ink); }
.button--warning { --button-face:var(--warning); --button-hover:var(--warning-hover); --button-ink:var(--warning-ink); --button-hover-ink:var(--warning-ink); }
.button--info { --button-face:var(--info); --button-hover:var(--info-hover); --button-ink:var(--info-ink); --button-hover-ink:var(--info-ink); }

.text-button {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 44px;
    max-width: 100%;
    padding: 10px 0;
    border: 0;
    background: var(--clear);
    color: var(--ink);
    font-family: var(--font-ui);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.text-button:hover {
    color: var(--green);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: var(--clear);
    color: var(--ink);
    font-size: 1.2rem;
    border-radius: var(--radius-small);
}

.icon-button:hover {
    background: var(--peach);
}

:is(.button, .text-button, .icon-button):focus-visible {
    outline: 3px solid var(--green);
    outline-offset: 3px;
}

button:disabled,
.button[aria-disabled=true] {
    opacity: .45;
    cursor: not-allowed;
}

.quiet-link {
    display: block;
    width: fit-content;
    margin: 1rem 0;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.quiet-link .icon {
    margin-right: .5rem;
}

:where(.reading-home, .reading-hub, .message-compose, .message-new, .message-empty, .friend-code-submit, .friend-match-action, .discovery-join),
.button--forest {
    --button-face: var(--green);
    --button-hover: color-mix(in srgb, var(--green) 85%, var(--ink));
    --button-ink: var(--green-ink);
    --button-hover-ink: var(--green-ink);
}
:where(.adventure-page, .daily-adventure, .shop), .button--plum {
    --button-face: var(--primary);
    --button-hover: var(--primary-hover);
    --button-ink: var(--primary-ink);
    --button-hover-ink: var(--primary-hover-ink);
}
.button--terracotta {
    --button-face: var(--primary);
    --button-hover: var(--primary-hover);
    --button-ink: var(--primary-ink);
    --button-hover-ink: var(--primary-hover-ink);
}

@media (prefers-reduced-motion: reduce) {
    .button { transition: none; }
}