@layer components {
    .btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        font-size: 13.5px;
        font-weight: 600;
        padding: 9px 15px;
        border-radius: var(--radius-sm);
        border: 1px solid transparent;
        cursor: pointer;
        text-decoration: none;
        transition: filter 0.12s ease, background 0.12s ease;
        line-height: 1;
        font-family: inherit;
    }

    .btn svg {
        width: 15px;
        height: 15px;
    }

    .btn-primary {
        background: var(--brand);
        color: #fff;
        box-shadow: var(--shadow-sm);
    }

    .btn-primary:hover {
        filter: brightness(1.06);
    }

    .btn-secondary {
        background: var(--surface);
        color: var(--text);
        border-color: var(--border-strong);
    }

    .btn-secondary:hover {
        background: var(--brand-wash);
        border-color: var(--brand);
        color: var(--brand-strong);
    }

    .btn-ghost {
        background: transparent;
        color: var(--text-muted);
    }

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

    .btn-danger-ghost {
        background: transparent;
        color: var(--critical);
    }

    .btn-danger-ghost:hover {
        background: var(--critical-bg);
    }

    .btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
    }

    .btn[disabled]:hover {
        filter: none;
        background: var(--surface);
    }

    /* Back-compat: a couple of not-yet-migrated fragments still use je-btn */
    .je-btn { }
    .je-btn--primary { background: var(--brand); color: #fff; }
    .je-btn--secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
}