/* Portable primitives. Import tokens.css and fonts.css first. */
.hk-surface { background: var(--hk-background); color: var(--ink); font-family: var(--font-family); }
.hk-glass, .hk-nav { border: var(--frame-border); }
.hk-glass { border-radius: var(--hk-radius-card); background: var(--hk-glass-nav); box-shadow: var(--hk-shadow-nav); backdrop-filter: var(--hk-blur-nav); -webkit-backdrop-filter: var(--hk-blur-nav); }
.hk-nav { border-radius: var(--hk-radius-nav); background: var(--hk-glass-nav); box-shadow: var(--hk-shadow-nav); backdrop-filter: var(--hk-blur-nav); -webkit-backdrop-filter: var(--hk-blur-nav); }
.hk-heading { font-family: var(--font-heading); font-size: var(--font-main-heading-size); font-weight: var(--font-main-heading-weight); line-height: 1.04; letter-spacing: -.025em; }
.hk-eyebrow { color: var(--orange); font: 600 13px/1.2 var(--font-family); letter-spacing: 2.7px; text-transform: uppercase; }
.hk-button { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 44px; padding: 10px 20px; border: 1px solid var(--white); border-radius: var(--hk-radius-control); background: var(--orange); color: var(--white); box-shadow: var(--action-shadow); font: 600 14px/1.4 var(--font-family); text-decoration: none; cursor: pointer; transition: transform var(--hk-transition), box-shadow var(--hk-transition); }
.hk-button:hover { transform: translateY(-2px); }
.hk-button--secondary { color: var(--orange); background: #fffdfa9c; border-color: var(--orange); box-shadow: none; }
.hk-field { min-height: 44px; padding: 10px 14px; border: 1px solid var(--hk-line); border-radius: var(--hk-radius-small); background: var(--hk-surface); color: var(--ink); font: inherit; }
.hk-logo { display: block; width: 220px; max-width: 100%; height: auto; object-fit: contain; }
:where(.hk-button, .hk-field, .hk-nav a):focus-visible { outline: 2px solid var(--hk-accent-ink); outline-offset: 4px; }
.hk-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }
@media (prefers-reduced-motion: reduce) { .hk-button { transition: none; } }

/* Portable icon and control treatments from the website's outlined icon language. */
.hk-icon-well { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(238,153,34,.22); border-radius: var(--hk-radius-control); background: rgba(238,153,34,.12); color: var(--orange); }
.hk-icon-well svg, .hk-icon-button svg { width: var(--hk-icon-size); height: var(--hk-icon-size); fill: none; stroke: currentColor; stroke-width: var(--hk-icon-stroke); stroke-linecap: round; stroke-linejoin: round; }
.hk-icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--hk-line); border-radius: var(--hk-radius-control); background: var(--hk-surface); color: var(--ink); cursor: pointer; transition: color var(--hk-transition), background var(--hk-transition), transform var(--hk-transition); }
.hk-icon-button:hover { color: var(--orange); background: #fff1df; transform: translateY(-2px); }