/* ============================================================
   BASE — buttons.css
   Neutral <button> element defaults. Matches the .button block
   so that a bare <button> and an <a class="button"> look the
   same by default. Opt into variants via the .button class.
   ============================================================ */

button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);

    padding: var(--space-xs) var(--space-m);

    font-family: var(--font-base);
    font-size: var(--step-0);
    font-weight: var(--font-weight-medium);
    line-height: var(--leading-tight);
    white-space: nowrap;

    color: var(--color-text);
    background-color: transparent;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    cursor: pointer;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

button:hover {
    background-color: var(--color-surface-raised);
    border-color: var(--color-text-muted);
}

button:focus-visible {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 3px;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}