/* Button base (reads theme tokens) */
.ux-btn {
    --_bg: var(--ux-soft);
    --_fg: var(--ux-fg);
    --_bd: var(--ux-border);
    --_accent: var(--ux-accent);
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border: 1px solid var(--_bd);
    border-radius: var(--ux-radius);
    padding: .5rem .9rem;
    background: var(--_bg);
    color: var(--_fg);
    cursor: pointer;
    user-select: none;
    box-shadow: var(--ux-shadow);
    transition: transform .06s ease, background .15s ease, border-color .15s ease;
    outline: none;
}

    .ux-btn:focus-visible {
        box-shadow: 0 0 0 3px color-mix(in hsl, var(--_accent) 30%, transparent);
    }

    .ux-btn:hover {
        transform: translateY(-1px);
    }

    .ux-btn:active {
        transform: translateY(0);
    }

    .ux-btn[aria-disabled="true"],
    .ux-btn.is-loading {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
    }

    .ux-btn .ux-icon {
        display: inline-flex;
        line-height: 0;
    }

    .ux-btn .ux-label {
        white-space: nowrap;
    }

/* Variants */
.ux-btn--solid {
    --_bg: var(--_accent);
    --_fg: #05150a;
    --_bd: color-mix(in oklab, var(--_accent) 85%, black);
}

.ux-btn--outline {
    background: transparent;
}

.ux-btn--ghost {
    background: transparent;
    border-color: transparent;
}

/* Sizes */
.ux-btn--sm {
    padding: .35rem .7rem;
    font-size: .9rem;
}

.ux-btn--lg {
    padding: .7rem 1.1rem;
    font-size: 1.05rem;
}

/* Toggle pressed */
.ux-btn[data-toggle="true"][aria-pressed="true"] {
    outline: 2px solid color-mix(in oklab, var(--_accent) 60%, white 10%);
    outline-offset: 1px;
}