.ui-button,
    .ui-icon-button,
    .ui-input,
    .ui-select,
    .ui-textarea {
        font-family: var(--ui-font-ui);
        transition:
            background-color var(--ui-motion-normal) var(--ui-motion-ease),
            border-color var(--ui-motion-normal) var(--ui-motion-ease),
            color var(--ui-motion-normal) var(--ui-motion-ease),
            box-shadow var(--ui-motion-normal) var(--ui-motion-ease),
            transform var(--ui-motion-fast) var(--ui-motion-ease);
    }

    .ui-button {
        min-height: var(--ui-button-height);
        padding-inline: var(--ui-button-padding-inline);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--ui-space-sm);
        border: 1px solid transparent;
        border-radius: var(--ui-button-radius);
        font-size: var(--ui-text-sm);
        font-weight: var(--ui-weight-semibold);
        line-height: 1;
        text-decoration: none;
        cursor: pointer;
        white-space: nowrap;
    }

    .ui-button:focus-visible,
    .ui-icon-button:focus-visible,
    .ui-input:focus-visible,
    .ui-select:focus-visible,
    .ui-textarea:focus-visible {
        outline: 2px solid var(--ui-focus-ring, var(--ui-primary));
        outline-offset: 2px;
    }

    .ui-button:disabled,
    .ui-icon-button:disabled,
    .ui-input:disabled,
    .ui-select:disabled,
    .ui-textarea:disabled {
        opacity: .55;
        cursor: not-allowed;
    }

    .ui-button--primary {
        background: var(--ui-button-primary-bg);
        border-color: var(--ui-button-primary-border);
        color: var(--ui-button-primary-text);
    }

    .ui-button--primary:hover:not(:disabled) {
        background: var(--ui-button-primary-hover-bg);
        border-color: var(--ui-button-primary-hover-border);
    }

    .ui-button--primary:active:not(:disabled) {
        background: var(--ui-primary-active);
        border-color: var(--ui-primary-active);
        transform: translateY(1px);
    }

    .ui-button--secondary {
        background: var(--ui-secondary);
        border-color: var(--ui-secondary);
        color: var(--ui-on-secondary);
    }

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

    .ui-button--outline:hover:not(:disabled),
    .ui-button--soft {
        background: var(--ui-primary-soft);
        border-color: var(--ui-primary-border);
        color: var(--ui-primary);
    }

    .ui-button--ghost {
        background: transparent;
        color: var(--ui-text);
    }

    .ui-button--ghost:hover:not(:disabled) {
        background: var(--ui-surface-alt);
    }

    .ui-button--danger {
        background: var(--ui-danger);
        border-color: var(--ui-danger);
        color: var(--ui-on-danger);
    }

    .ui-button--sm { min-height: 34px; padding-inline: var(--ui-space-md); }
    .ui-button--lg { min-height: 50px; padding-inline: var(--ui-space-lg); font-size: var(--ui-text-md); }
    .ui-button--block { width: 100%; }

    .ui-icon-button {
        width: var(--ui-button-height);
        height: var(--ui-button-height);
        display: inline-grid;
        place-items: center;
        padding: 0;
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-control);
        background: var(--ui-surface);
        color: var(--ui-text);
        cursor: pointer;
    }

    .ui-icon-button:hover:not(:disabled) {
        border-color: var(--ui-primary-border);
        background: var(--ui-primary-soft);
        color: var(--ui-primary);
    }

    .ui-field {
        display: grid;
        gap: var(--ui-space-sm);
    }

    .ui-label {
        color: var(--ui-text);
        font-size: var(--ui-text-sm);
        font-weight: var(--ui-weight-semibold);
    }

    .ui-input,
    .ui-select,
    .ui-textarea {
        width: 100%;
        min-width: 0;
        border: 1px solid var(--ui-input-border-color);
        border-radius: var(--ui-input-radius);
        background: var(--ui-input-bg);
        color: var(--ui-input-text-color);
        font-size: var(--ui-text-sm);
    }

    .ui-input,
    .ui-select {
        min-height: var(--ui-input-height);
        padding-inline: var(--ui-space-md);
    }

    .ui-textarea {
        padding: var(--ui-space-md);
        resize: vertical;
    }

    .ui-input:focus,
    .ui-select:focus,
    .ui-textarea:focus {
        border-color: var(--ui-input-focus-color);
    }

    .ui-help {
        color: var(--ui-text-muted);
        font-size: var(--ui-text-xs);
    }

    .ui-error {
        color: var(--ui-danger-text,var(--ui-danger));
        font-size: var(--ui-text-xs);
        font-weight: var(--ui-weight-medium);
    }

    .ui-checkbox {
        display: inline-flex;
        align-items: flex-start;
        gap: var(--ui-space-sm);
        color: var(--ui-text);
        font-size: var(--ui-text-sm);
    }

    .ui-checkbox input {
        accent-color: var(--ui-primary);
    }

    .ui-card {
        background: var(--ui-card-bg);
        color: var(--ui-text);
        border: 1px solid var(--ui-card-border-color);
        border-radius: var(--ui-card-radius);
        box-shadow: var(--ui-card-shadow);
    }

    .ui-card--flat { box-shadow: none; }
    .ui-card--soft { background: var(--ui-surface-alt); }

    .ui-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding-inline: var(--ui-space-sm);
        border-radius: var(--ui-radius-pill);
        background: var(--ui-primary-soft);
        color: var(--ui-primary);
        font-size: var(--ui-text-xs);
        font-weight: var(--ui-weight-semibold);
    }

    .ui-alert {
        padding: var(--ui-space-md);
        border: 1px solid var(--ui-border);
        border-radius: var(--ui-radius-md);
        background: var(--ui-surface-alt);
        color: var(--ui-text);
    }

    .ui-alert--success { border-color: var(--ui-success); }
    .ui-alert--warning { border-color: var(--ui-warning); }
    .ui-alert--danger { border-color: var(--ui-danger); }
    .ui-alert--info { border-color: var(--ui-info); }

    .ui-modal-shell,
    .ui-drawer-shell {
        color: var(--ui-text);
        font-family: var(--ui-font-body);
    }

    .ui-modal-surface {
        border-radius: var(--ui-modal-radius);
        background: var(--ui-surface);
        box-shadow: var(--ui-shadow-modal);
    }

    .ui-photo-request-trigger--desktop {
        display: none;
    }

    .ui-photo-request-trigger--drawer {
        width: 100%;
        border: 0;
        background: transparent;
        color: var(--ui-primary);
        text-align: start;
        font: inherit;
        font-weight: var(--ui-weight-semibold);
        cursor: pointer;
    }

    @media (prefers-reduced-motion: reduce) {
        .ui-button,
        .ui-icon-button,
        .ui-input,
        .ui-select,
        .ui-textarea {
            transition: none !important;
        }
    }