/* Brand-neutral components for new pages. Existing Selene classes remain intact. */
.ui-button {
  display: inline-flex;
  min-height: var(--ds-control-height);
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-3) var(--ds-space-5);
  border: var(--ds-border-width) solid transparent;
  border-radius: var(--ds-radius-md);
  background: var(--ds-color-brand);
  color: var(--ds-color-on-brand);
  font: 600 var(--ds-text-sm)/1.2 var(--ds-font-label);
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}

.ui-button:hover { background: var(--ds-color-brand-strong); }
.ui-button:focus-visible { outline: 3px solid var(--ds-color-accent); outline-offset: 3px; }
.ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.ui-button--secondary { border-color: var(--ds-color-border); background: var(--ds-color-surface); color: var(--ds-color-ink); }
.ui-button--secondary:hover { background: var(--ds-color-surface-soft); color: var(--ds-color-ink); }
.ui-button--quiet { background: transparent; color: var(--ds-color-brand); }
.ui-button--quiet:hover { background: var(--ds-color-surface-soft); color: var(--ds-color-brand-strong); }
.ui-button--danger { background: var(--ds-color-danger); }
.ui-button--danger:hover { filter: brightness(.9); }
.ui-button--small { min-height: 2rem; padding: var(--ds-space-2) var(--ds-space-3); font-size: var(--ds-text-xs); }

.ui-card, .ui-panel {
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-card-radius);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-ink);
}

.ui-card { overflow: hidden; box-shadow: var(--ds-shadow-soft); }
.ui-card__body, .ui-panel { padding: var(--ds-space-6); }
.ui-card__title, .ui-panel__title { margin: 0 0 var(--ds-space-3); color: var(--ds-color-ink); font: 500 var(--ds-text-lg)/var(--ds-line-heading) var(--ds-font-display); }
.ui-card__copy, .ui-panel__copy { margin: 0; color: var(--ds-color-ink-soft); font: 400 var(--ds-text-base)/var(--ds-line-body) var(--ds-font-body); }

.ui-field { display: grid; gap: var(--ds-space-2); color: var(--ds-color-ink-soft); font: 500 var(--ds-text-sm)/1.4 var(--ds-font-label); }
.ui-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%;
  min-height: var(--ds-control-height);
  padding: var(--ds-field-padding-block) var(--ds-field-padding-inline);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-sm);
  background: var(--ds-color-surface-raised);
  color: var(--ds-color-ink);
  font: 400 var(--ds-text-base)/var(--ds-line-body) var(--ds-font-body);
}
.ui-field :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus-visible { outline: 3px solid var(--ds-color-brand); outline-offset: 2px; }

.ui-status {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-2);
  padding: var(--ds-space-1) var(--ds-space-3);
  border: var(--ds-border-width) solid var(--ds-color-border);
  border-radius: var(--ds-radius-pill);
  background: var(--ds-color-surface);
  color: var(--ds-color-ink-soft);
  font: 600 var(--ds-text-xs)/1.3 var(--ds-font-label);
}
.ui-status--success { border-color: color-mix(in srgb, var(--ds-color-success), transparent 65%); color: var(--ds-color-success); }
.ui-status--warning { border-color: color-mix(in srgb, var(--ds-color-warning), transparent 65%); color: var(--ds-color-warning); }
.ui-status--danger { border-color: color-mix(in srgb, var(--ds-color-danger), transparent 65%); color: var(--ds-color-danger); }

@media (prefers-reduced-motion: reduce) {
  .ui-button { transition: none; }
}