.ui-button {
    display: inline-block;
    box-sizing: border-box;
    min-height: var(--control-min-height);
    padding: var(--space-2) var(--space-4);
    border: var(--focus-width) solid var(--color-control-border);
    border-radius: var(--radius-button);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.ui-button--primary {
    background: var(--color-primary);
    color: var(--color-on-accent);
    border-color: var(--color-primary-dark);
}

.ui-button--ghost {
    background: transparent;
    color: var(--color-primary-dark);
    border-color: transparent;
}

.ui-button--secondary:hover:not(:disabled),
.ui-button--secondary:active:not(:disabled),
.ui-button--ghost:hover:not(:disabled),
.ui-button--ghost:active:not(:disabled) {
    background: var(--color-primary-light);
    color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.ui-button--primary:hover:not(:disabled),
.ui-button--primary:active:not(:disabled) {
    background: var(--color-primary-dark);
    color: var(--color-on-inverse);
}

.ui-button--status-action {
    padding: var(--space-6);
    background: var(--status-background);
    color: var(--status-foreground);
}

.ui-button--status-action:hover:not(:disabled),
.ui-button--status-action:active:not(:disabled) {
    border-color: var(--color-ink);
    box-shadow: var(--shadow-card);
}

.ui-button:disabled {
    background: var(--color-background);
    color: var(--color-muted);
    border-color: var(--color-control-border);
    cursor: not-allowed;
}

.ui-button[aria-busy="true"] {
    cursor: progress;
}

.ui-button:focus-visible {
    box-shadow: 0 0 0 var(--focus-offset) var(--color-surface);
}

.ui-status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-pill);
    font-family: var(--font-product);
    font-size: var(--type-label-size);
    font-weight: var(--type-label-weight);
    line-height: var(--type-label-leading);
    vertical-align: middle;
}

.ui-card, .ui-panel {
    padding: var(--space-4);
    border: var(--focus-width) solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-text);
}

.ui-card {
    box-shadow: var(--shadow-card);
}

.ui-card__title {
    min-block-size: calc(var(--type-h2-size) * var(--type-h2-leading));
}

.ui-card__meta {
    min-block-size: calc(var(--type-caption-size) * var(--type-caption-leading));
}

.ui-card__action {
    min-block-size: calc(var(--type-body-size) * var(--type-body-leading));
}

.ui-panel {
    margin-block: var(--space-4);
    box-shadow: var(--shadow-none);
}

.ui-dialog {
    box-sizing: border-box;
    max-width: calc(100vw - var(--space-8));
    max-height: calc(100dvh - var(--space-8));
    padding: var(--space-6);
    border: var(--focus-width) solid var(--color-control-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-overlay);
}

.ui-dialog__content {
    margin-block-end: var(--space-4);
}

.ui-dialog__content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.ui-notice {
    padding: var(--space-4);
    border: var(--focus-width) solid var(--color-primary-dark);
    border-radius: var(--radius-button);
    background: var(--color-primary-light);
    color: var(--color-text);
    font-family: var(--font-product);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-leading);
}

.ui-notice:empty {
    display: none;
}

.ui-notice[data-variant="success"] {
    background: var(--color-ready);
    color: var(--color-on-accent);
    border-color: var(--color-ink);
}

.ui-notice[data-variant="warning"] {
    background: var(--color-waiting);
    color: var(--color-on-accent);
    border-color: var(--color-ink);
}

.ui-notice[data-variant="error"] {
    background: var(--color-ink);
    color: var(--color-on-inverse);
    border-color: var(--color-ink);
}