/**
 * .ui-button — base interactive button primitive.
 * Token-driven; modifiers compose on top (.has-label, .primary, .cta,
 * .icon-stroke, .midi-editor-button — see main.css for the size variant).
 */
.ui-button {
    width: var(--control-h-lg);
    height: var(--control-h-lg);
    border: none;
    border-radius: var(--radius-lg);
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-base) var(--ease-out),
                color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    position: relative;
    padding: 0;
    font-family: inherit;
}

.ui-button:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    transform: translateY(var(--lift-1));
    box-shadow: none;
}

.ui-button:active {
    background: rgba(255, 255, 255, 0.15);
    transform: translateY(0);
    box-shadow: none;
}

.ui-button:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

.ui-button.active,
.ui-button[aria-pressed="true"] {
    background: var(--accent-bg-soft);
    color: var(--accent);
}

.ui-button.active:hover,
.ui-button[aria-pressed="true"]:hover {
    background: rgba(56, 145, 255, 0.3);
}

.ui-button.primary {
    background: rgba(255, 255, 255, 0.08);
}

.ui-button.cta {
    background: var(--accent);
    color: #fff;
}

.ui-button.cta:hover {
    background: var(--accent-hover);
    box-shadow: var(--accent-glow);
}

.ui-button svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    stroke: none;
}

.ui-button.icon-stroke svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ui-button.has-label {
    width: auto;
    padding: 0 var(--space-3);
    min-width: unset;
    gap: var(--space-2);
    white-space: nowrap;
    flex-shrink: 0;
    z-index: 5;
    font-size: var(--font-md);
}

.ui-button .button-label {
    font-size: var(--font-md);
    font-weight: 500;
}