.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .7rem;
    min-height: 50px;
    padding: .7rem 1.2rem;
    border: 1px solid var(--button-face, var(--primary));
    border-radius: var(--radius-small);
    background: var(--button-face, var(--primary));
    color: var(--surface-white);
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    box-shadow: 0 3px 10px var(--shadow);
    transition: background .15s;
}

.button:hover {
    background: var(--button-hover, var(--primary-hover));
    border-color: var(--button-hover, var(--primary-hover));
    color: var(--surface-white);
}

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

.button--outline:hover {
    background: var(--peach);
    color: var(--ink);
    border-color: var(--primary);
}

.button--small {
    min-height: 40px;
    padding: .5rem .85rem;
    font-size: .95rem;
}

.button--secondary {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--green);
    box-shadow: none;
}

.button--secondary:hover {
    background: var(--green);
    border-color: var(--green);
    color: var(--surface-white);
}

.button--large {
    font-size: 1.35rem;
    min-height: 62px;
    padding: 1rem 2.5rem;
}

.text-button {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .4rem 0;
    border: 0;
    background: var(--clear);
    color: var(--ink);
    line-height: 1.25;
}

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

.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);
}

button:disabled {
    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;
}

/* Color roles are inherited by primary actions; secondary controls keep their own palette. */
:where(.reading-home, .reading-hub, .reading-quick, .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));
}
:where(.adventure-page, .daily-adventure, .village-shop), .button--plum {
    --button-face: #694877;
    --button-hover: #563661;
}
.button--terracotta, .reading-share {
    --button-face: var(--primary);
    --button-hover: var(--primary-hover);
}

/* A solid lower edge adds depth without changing form alignment or hit areas. */
.button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)) {
    --button-edge: color-mix(in srgb, var(--button-face, var(--primary)) 65%, var(--ink));
    border-color: var(--button-edge);
    box-shadow: 0 5px 0 var(--button-edge), inset 0 1px 0 #ffffff38;
    translate: 0 0;
    transition: translate .12s ease-out, box-shadow .12s ease-out, background .12s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)):not(:disabled, [aria-disabled=true]):hover {
        border-color: var(--button-edge);
        translate: 0 2px;
        box-shadow: 0 3px 0 var(--button-edge), inset 0 1px 0 #ffffff38;
    }
}
.button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)):not(:disabled, [aria-disabled=true]):active {
    border-color: var(--button-edge);
    translate: 0 4px;
    box-shadow: 0 1px 0 var(--button-edge);
}
.button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)):focus-visible { outline:2px solid var(--ink); outline-offset:7px; }
.button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)):is(:disabled, [aria-disabled=true]) {
    background: var(--button-face, var(--primary));
    border-color: var(--button-edge);
    translate: none;
    cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
    .button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)) { transition:none; }
    .button:not(:where(.button--outline, .button--secondary, .button--ghost, .secondary, .danger, .button--danger, .admin .button)):not(:disabled, [aria-disabled=true]):is(:hover, :active) {
        translate:none;
        box-shadow:0 5px 0 var(--button-edge), inset 0 1px 0 #ffffff38;
    }
}