/* Opt-in presentation primitives. Do not apply to legacy forms wholesale. */
.hp-ui { color: var(--hp-text); font-family: var(--hp-font-ui); }
.hp-ui, .hp-ui * { box-sizing: border-box; }
.hp-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--hp-gold-light); outline-offset: 3px; box-shadow: var(--hp-focus);
}
.hp-ui .hp-button {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--hp-space-2);
  min-height: 46px; padding: .75rem 1.5rem; border: 1px solid var(--hp-border-accent);
  border-radius: var(--hp-radius-pill); font: 700 .95rem/1.4 var(--hp-font-ui);
  background: linear-gradient(135deg,var(--hp-gold-light),var(--hp-gold)); color: var(--hp-navy);
  cursor: pointer; text-decoration: none; transition: filter .16s ease, border-color .16s ease;
}
.hp-ui .hp-button--secondary { background: var(--hp-surface); color: var(--hp-text); }
.hp-ui .hp-button:hover { filter: brightness(1.1); border-color: var(--hp-gold-light); }
.hp-ui .hp-button:active { filter: brightness(.95); }
.hp-ui .hp-button:disabled { opacity: .55; cursor: not-allowed; }
.hp-ui :is(.hp-card,.hp-form-surface,.hp-modal-surface) {
  padding: var(--hp-space-6); border: 1px solid var(--hp-border); border-radius: var(--hp-radius-lg);
  background: var(--hp-surface); color: var(--hp-text); box-shadow: var(--hp-shadow); min-width: 0;
}
.hp-ui .hp-modal-surface { width: min(100%,38rem); max-height: 85svh; overflow-y: auto; }
.hp-ui :is(.hp-input,.hp-select) {
  width: 100%; min-height: 46px; padding: .75rem; border: 1px solid var(--hp-border);
  border-radius: var(--hp-radius-sm); background: var(--hp-navy); color: var(--hp-text);
  font: inherit; color-scheme: dark;
}
.hp-ui :is(.hp-input,.hp-select):hover { border-color: var(--hp-border-accent); }
.hp-ui .hp-input::placeholder { color: var(--hp-muted); }
.hp-ui [aria-invalid="true"] { border-color: var(--hp-danger); }
.hp-ui .hp-chip { display: inline-flex; padding: .35rem .75rem; border: 1px solid var(--hp-border); border-radius: var(--hp-radius-pill); background: var(--hp-surface-raised); color: var(--hp-text); font: 600 .85rem/1.4 var(--hp-font-ui); }
.hp-ui .hp-chip[aria-pressed="true"] { border-color: var(--hp-gold); color: var(--hp-gold-light); }
.hp-ui .hp-notice { padding: var(--hp-space-4); border: 1px solid var(--hp-border); border-inline-start: 3px solid var(--hp-info); border-radius: var(--hp-radius-sm); background: var(--hp-surface); color: var(--hp-text); }
.hp-ui .hp-notice--success { border-inline-start-color: var(--hp-success); }
.hp-ui .hp-notice--warning { border-inline-start-color: var(--hp-warning); }
.hp-ui .hp-notice--danger { border-inline-start-color: var(--hp-danger); }
.hp-ui .hp-page-header { padding: var(--hp-space-12) var(--hp-space-6); background: var(--hp-navy); }
.hp-ui .hp-page-header h1 { margin: 0 0 var(--hp-space-4); font: 700 clamp(2rem,4vw,3.5rem)/1.1 var(--hp-font-display); color: var(--hp-text); }
.hp-ui .hp-page-header p { color: var(--hp-muted); max-width: 65ch; line-height: 1.6; }
.hp-ui.hp-footer { padding: var(--hp-space-8) var(--hp-space-6); background: var(--hp-navy); border-top: 1px solid var(--hp-border); }
.hp-ui.hp-footer a { color: var(--hp-gold-light); text-underline-offset: .2em; }
.hp-ui.hp-footer p { color: var(--hp-muted); line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .hp-ui * { transition: none; scroll-behavior: auto; } }