/* Shared primitives are namespaced. Layout details stay in .razor.css files. */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; scroll-padding-top: 7rem; background: var(--hl-background); }
body { margin: 0; color: var(--hl-text); background: var(--hl-background); font-family: var(--hl-font-body); font-size: var(--hl-text-base); line-height: var(--hl-leading-body); }
h1, h2, h3, p, figure { margin: 0; }
button, input { font: inherit; }
button, a, input { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .25em; }
img, svg { max-width: 100%; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--hl-focus); outline-offset: 5px; }
h1:focus, main:focus { outline: none; }
::selection { background: var(--hl-honey-wash); color: var(--hl-text); }

.hl-container { width: 100%; max-width: var(--hl-page-width); padding-inline: var(--hl-gutter); margin-inline: auto; }
.hl-section { padding-block: var(--hl-section-space); }
.hl-eyebrow { display: flex; align-items: center; gap: var(--hl-space-2); color: var(--hl-moss); font-size: var(--hl-text-xs); font-weight: var(--hl-weight-semibold); letter-spacing: var(--hl-tracking-label); line-height: 1.5; }
.hl-eyebrow::before { content: ""; width: .375rem; height: .375rem; flex-shrink: 0; border-radius: 50%; background: currentColor; }
.hl-display { font-family: var(--hl-font-display); font-size: var(--hl-text-hero); font-weight: var(--hl-weight-normal); line-height: var(--hl-leading-heading); letter-spacing: var(--hl-tracking-heading); }
.hl-heading { font-family: var(--hl-font-display); font-size: var(--hl-text-3xl); font-weight: var(--hl-weight-normal); line-height: 1.2; letter-spacing: var(--hl-tracking-heading); }
.hl-lead { color: var(--hl-text-muted); font-size: var(--hl-text-lg); line-height: var(--hl-leading-body); }
.hl-muted { color: var(--hl-text-muted); }
.hl-link { display: inline-flex; align-items: center; gap: var(--hl-space-3); color: var(--hl-action); font-size: var(--hl-text-sm); font-weight: var(--hl-weight-medium); text-decoration: none; }
.hl-link:hover { text-decoration: underline; }
.hl-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--hl-space-5); min-height: 3rem; padding: .8rem 1.2rem; border: 1px solid transparent; border-radius: var(--hl-radius-sm); color: var(--hl-on-action); background: var(--hl-action); font-family: var(--hl-font-body); font-size: var(--hl-text-sm); font-weight: var(--hl-weight-medium); line-height: 1.4; cursor: pointer; text-decoration: none; transition: background var(--hl-motion-fast), transform var(--hl-motion-fast); }
.hl-button:hover:not(:disabled) { background: var(--hl-action-hover); transform: translateY(-1px); }
.hl-button--secondary { color: var(--hl-text); background: transparent; border-color: var(--hl-border); }
.hl-button--secondary:hover:not(:disabled) { background: var(--hl-surface-subtle); }
.hl-button--clay { background: var(--hl-accent); }
.hl-button--clay:hover:not(:disabled) { background: var(--hl-clay-deep); }
.hl-button:disabled { opacity: .6; cursor: wait; }
.hl-icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; vertical-align: middle; }
.hl-input { width: 100%; min-width: 0; min-height: 3.2rem; padding: .8rem 1rem; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); background: var(--hl-surface); color: var(--hl-text); font-size: var(--hl-text-base); line-height: 1.4; }
.hl-input::placeholder { color: var(--hl-text-muted); opacity: .8; }
.hl-input:focus { border-color: var(--hl-focus); }
.hl-input.invalid { border-color: var(--hl-error); }
.hl-input:disabled { opacity: .6; }
.validation-message { margin-top: var(--hl-space-2); color: var(--hl-error); font-size: var(--hl-text-sm); }
.hl-spinner { display: inline-block; width: 1rem; height: 1rem; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: hl-spin 900ms linear infinite; }
.hl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.hl-skip-link { position: fixed; top: -8rem; left: var(--hl-space-4); padding: var(--hl-space-3) var(--hl-space-5); background: var(--hl-action); color: var(--hl-on-action); z-index: 100; border-radius: var(--hl-radius-sm); }
.hl-skip-link:focus { top: var(--hl-space-4); }
@keyframes hl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .hl-button { transition: none; }
    .hl-spinner { animation: none; border-style: dotted; }
}