/* Opt-in components: existing templates are unaffected until they adopt these classes. */
.ui-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ui-space-2);
  min-height: 2.75rem; padding: .625rem 1rem; border: var(--ui-border-width) solid transparent;
  border-radius: var(--ui-radius-md); background: var(--ui-color-primary); color: var(--ui-color-primary-contrast);
  font: 500 var(--ui-font-size-sm)/1.5 var(--ui-font-family); text-decoration: none; cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ui-button:hover { background: var(--ui-color-primary-hover); }
.ui-button:active { transform: translateY(1px); }
.ui-button:focus-visible, .ui-input:focus-visible, .ui-select:focus-visible, .ui-textarea:focus-visible {
  outline: 0; box-shadow: var(--ui-focus-ring);
}
.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  opacity: .55; cursor: not-allowed; transform: none; box-shadow: none;
}
.ui-button--secondary { background: var(--ui-color-surface); color: var(--ui-color-text); border-color: var(--ui-color-border); }
.ui-button--secondary:hover { background: var(--ui-color-surface-muted); }
.ui-button--danger { background: var(--ui-color-danger); }
.ui-card { background: var(--ui-color-surface); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-shadow-sm); }
.ui-input, .ui-select, .ui-textarea {
  width: 100%; min-height: 2.75rem; padding: .625rem .875rem; border: 1px solid var(--ui-color-border);
  border-radius: var(--ui-radius-md); background: var(--ui-color-surface); color: var(--ui-color-text);
  font: 400 var(--ui-font-size-sm)/1.6 var(--ui-font-family);
}
.ui-input:disabled,
.ui-select:disabled,
.ui-textarea:disabled {
  opacity: .6; background: var(--ui-color-surface-muted); cursor: not-allowed;
}
.ui-textarea { min-height: 7rem; resize: vertical; }
.ui-badge { display: inline-flex; align-items: center; padding: .2rem .625rem; border-radius: var(--ui-radius-pill); font-size: var(--ui-font-size-xs); font-weight: 600; }
.ui-badge--success { color: var(--ui-color-success); background: var(--ui-color-success-soft); }
.ui-badge--warning { color: var(--ui-color-warning); background: var(--ui-color-warning-soft); }
.ui-badge--danger { color: var(--ui-color-danger); background: var(--ui-color-danger-soft); }
.ui-alert { padding: var(--ui-space-4); border: 1px solid var(--ui-color-border); border-radius: var(--ui-radius-md); background: var(--ui-color-surface-muted); color: var(--ui-color-text); }
.ui-alert--success { color: var(--ui-color-success); border-color: color-mix(in srgb, var(--ui-color-success) 25%, var(--ui-color-border)); background: var(--ui-color-success-soft); }
.ui-alert--warning { color: var(--ui-color-warning); border-color: color-mix(in srgb, var(--ui-color-warning) 25%, var(--ui-color-border)); background: var(--ui-color-warning-soft); }
.ui-alert--danger { color: var(--ui-color-danger); border-color: color-mix(in srgb, var(--ui-color-danger) 25%, var(--ui-color-border)); background: var(--ui-color-danger-soft); }