@layer buttons {
    :is(button, .btn) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-5);
        border: var(--border-width) solid var(--color-btn-bg);
        border-radius: var(--radius-md);
        background: var(--color-btn-bg);
        color: var(--color-btn-contrast);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        text-decoration: none;
        cursor: pointer;
        box-shadow: var(--shadow-xs);
        transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    :is(button, .btn):hover {
        background: var(--color-btn-hover);
        border-color: var(--color-btn-hover);
        color: var(--color-btn-contrast);
        text-decoration: none;
    }

    :is(button, .btn):active {
        background: var(--color-btn-active);
        border-color: var(--color-btn-active);
    }

    :is(button, .btn):focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-ring);
    }

    :is(button, .btn):disabled {
        background: var(--color-border-strong);
        border-color: var(--color-border-strong);
        color: var(--color-text-subtle);
        box-shadow: none;
        cursor: not-allowed;
    }

    /* Low-emphasis action — row-level Edit/Delete, "back" links.
       The solid accent .btn stays reserved for the one primary action per page. */
    .btn-ghost {
        display: inline-flex;
        align-items: center;
        padding: var(--space-1) var(--space-2);
        border: var(--border-width) solid transparent;
        border-radius: var(--radius-md);
        background: none;
        color: var(--color-text-muted);
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
        cursor: pointer;
        transition: color var(--transition-fast), border-color var(--transition-fast);
    }

    .btn-ghost:hover {
        color: var(--color-accent);
        border-color: var(--color-border);
        text-decoration: none;
    }

    .btn-ghost:active {
        color: var(--color-accent-active);
    }

    .btn-ghost:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-ring);
    }

    /* Destructive-but-quiet action — log out. Small (reduced vertical
       padding), light-red fill, red border/text; never the solid accent. */
    .btn-danger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-1) var(--space-3);
        border: var(--border-width) solid var(--color-danger-border);
        border-radius: var(--radius-md);
        background: var(--color-danger-bg);
        color: var(--color-danger);
        font-weight: var(--font-weight-medium);
        font-size: var(--font-size-sm);
        text-decoration: none;
        cursor: pointer;
        transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
    }

    .btn-danger:hover {
        background: var(--color-danger-border);
        border-color: var(--color-danger);
        color: var(--color-danger-hover);
        text-decoration: none;
    }

    .btn-danger:active {
        color: var(--color-danger-hover);
    }

    .btn-danger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-danger-ring);
    }

    /* Ghost-button intent modifiers — pair with .btn-ghost. Rest state stays
       plain (.btn-ghost's neutral muted text); only hover/focus signal what
       the action does. Delete uses danger, Edit uses warning. */
    .btn-ghost-danger:hover {
        background: var(--color-danger-bg);
        border-color: var(--color-danger-border);
        color: var(--color-danger);
    }

    .btn-ghost-danger:active {
        color: var(--color-danger-hover);
    }

    .btn-ghost-danger:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-danger-ring);
    }

    .btn-ghost-warning:hover {
        background: var(--color-warning-bg);
        border-color: var(--color-warning-border);
        color: var(--color-warning);
    }

    .btn-ghost-warning:active {
        color: var(--color-warning-hover);
    }

    .btn-ghost-warning:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px var(--color-warning-ring);
    }
}