@layer components {
    .button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        padding: var(--space-2) var(--space-4);
        border: 1px solid transparent;
        border-radius: var(--radius-md);
        background: transparent;
        color: var(--fg);
        font: inherit;
        font-size: var(--text-sm);
        font-weight: var(--weight-medium);
        line-height: 1;
        cursor: pointer;
        text-decoration: none;
        white-space: nowrap;
        transition: background var(--duration-fast) var(--easing-out),
                    border-color var(--duration-fast) var(--easing-out),
                    color var(--duration-fast) var(--easing-out);
    }
    .button:hover { text-decoration: none; }
    .button:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }
    .button:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

    .button-primary {
        background: var(--accent);
        color: var(--fg-on-accent);
    }
    .button-primary:hover {
        background: var(--accent-hover);
        color: var(--fg-on-accent);
    }

    .button-secondary {
        border-color: var(--border);
        background: var(--bg);
    }
    .button-secondary:hover { background: var(--bg-hover); }

    .button-ghost:hover { background: var(--bg-hover); }

    .button-danger {
        border-color: var(--border);
        background: var(--bg);
        color: var(--danger);
    }
    .button-danger:hover {
        background: var(--danger);
        color: var(--fg-on-accent);
        border-color: var(--danger);
    }

    .button-sm {
        padding: var(--space-1) var(--space-3);
        font-size: var(--text-xs);
    }

    /* × dismiss button — close modals, clear a selection chip,
     * dismiss a toast, etc. Plain background, big × glyph, picks up
     * fg colour on hover. */
    .button-close {
        background: transparent;
        border: 0;
        padding: 0;
        cursor: pointer;
        color: var(--fg-muted);
        font-size: var(--text-xl);
        line-height: 1;
    }
    .button-close:hover { color: var(--fg); }

    /* Specialised compact button used inside .url-pill. Different
     * shape (smaller, success-tinted on confirmation) than the
     * primary button shape, so its own component. */
    .copy-btn {
        flex: none;
        padding: var(--space-1) var(--space-3);
        border: 1px solid var(--border);
        border-radius: var(--radius-sm);
        background: var(--bg);
        color: var(--fg);
        font: inherit;
        font-size: var(--text-xs);
        font-weight: var(--weight-medium);
        cursor: pointer;
        transition: background var(--duration-fast) var(--easing-out);
    }
    .copy-btn:hover { background: var(--bg-hover); }
    .copy-btn.copied {
        background: var(--success-bg);
        color: var(--success-fg);
        border-color: var(--success-border);
    }

    /* In-block variant: when copy.js injects a copy-btn directly
     * inside a <pre>, position it absolute top-right and fade it
     * in only when the reader hovers (or focuses) the block.
     * Keeping it visible by default would crowd narrow snippets. */
    pre > .copy-btn {
        position: absolute;
        top: var(--space-2);
        right: var(--space-2);
        opacity: 0;
        transition: opacity var(--duration-fast) var(--easing-out),
                    background var(--duration-fast) var(--easing-out);
    }
    pre:hover > .copy-btn,
    pre > .copy-btn:focus-visible,
    pre > .copy-btn.copied { opacity: 1; }
}