/* Shared tokens and primitives (visitor journey + staff desk). System font stack, no external resources. */
:root {
  --violet-50: #F3EEFC; --violet-100: #DFD2F8; --violet-300: #B79BE9; --violet-500: #7B52C6;
  --violet-600: #6A3FD0; --violet-700: #5B34B8; --violet-800: #432071; --violet-950: #2E1A52;
  --ink: #1E1633; --muted: #5A5370; --subtle: #6E6785; --line: #E6E0F2; --field-border: #8E86A3;
  --page: #FAF8FD; --surface: #FFFFFF; --error: #B42318; --success: #1E7A46;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--page); font-size: 17px; line-height: 24px; }
h1, h2, p { margin: 0; }
button, input, textarea { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--violet-600); outline-offset: 3px; }
.on-dark :focus-visible { outline-color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 20px; border-radius: 12px;
  border: 1px solid transparent; background: var(--violet-700); color: #fff; font-weight: 700; font-size: 17px; white-space: nowrap; transition: transform 90ms ease-out; }
.btn:hover { background: var(--violet-800); }
.btn:active { transform: scale(.97); }
.btn[disabled] { opacity: .7; cursor: default; transform: none; }
.btn.secondary { background: var(--surface); color: var(--ink); border-color: var(--field-border); }
.btn.secondary:hover { background: var(--violet-50); }
.btn.small { min-height: 44px; font-size: 15px; padding: 0 16px; }
.btn.text { background: none; border-color: transparent; color: var(--violet-600); min-height: 44px; text-decoration: underline; }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.field { margin-bottom: 20px; }
.field label { display: block; font-size: 15px; line-height: 20px; font-weight: 600; margin-bottom: 8px; }
.frame { display: flex; align-items: stretch; min-height: 52px; background: var(--surface); border: 1px solid var(--field-border); border-radius: 12px; overflow: hidden; }
.frame:focus-within { outline: 3px solid var(--violet-600); outline-offset: 2px; }
.frame input { flex: 1; min-width: 0; border: 0; background: none; padding: 0 14px; font-size: 16px; line-height: 24px; outline: 0; }
.frame input::placeholder, textarea::placeholder { color: var(--subtle); opacity: 1; }
.frame .prefix { display: flex; align-items: center; padding: 0 0 0 14px; font-size: 16px; color: var(--muted); font-weight: 600; }
.field.invalid .frame { border: 2px solid var(--error); }
.err { display: flex; gap: 6px; align-items: flex-start; margin-top: 8px; color: var(--error); font-size: 14px; line-height: 20px; }
.err svg { margin-top: 2px; }
.err:empty { display: none; }
.banner { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--error); border-radius: 12px; background: #fff; color: var(--error); font-size: 15px; line-height: 21px; }
.banner .btn { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .btn:active { transform: none; }
}