/* HostPocket base foundation. Legacy page elements remain untouched unless they opt in. */
.hp-app {
    box-sizing: border-box;
    background: var(--hp-bg);
    color: var(--hp-text);
    font-family: var(--hp-font-ui);
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

.hp-app :where([class^="hp-"], [class*=" hp-"]),
.hp-app :where([class^="hp-"], [class*=" hp-"])::before,
.hp-app :where([class^="hp-"], [class*=" hp-"])::after {
    box-sizing: border-box;
}

.hp-app :where(.hp-page, .hp-card, .hp-modal, .hp-drawer) :where(h1, h2, h3, h4) {
    color: inherit;
    font-family: var(--hp-font-ui);
    line-height: 1.2;
    margin-block-start: 0;
}

.hp-app :where(.hp-display-heading) {
    font-family: var(--hp-font-display);
}

.hp-app :where(.hp-btn, .hp-input, .hp-select, .hp-textarea) {
    font: inherit;
}

.hp-app :where(.hp-link) {
    color: var(--hp-green-900);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

.hp-app :where(.hp-link):hover {
    text-decoration-thickness: 0.12em;
}

.hp-app :where(
    .hp-btn,
    .hp-input,
    .hp-select,
    .hp-textarea,
    .hp-checkbox__control,
    .hp-switch__input,
    .hp-link
):focus-visible {
    outline: 3px solid var(--hp-blue-400);
    outline-offset: 2px;
}

.hp-app :where(.hp-btn, .hp-input, .hp-select, .hp-textarea):disabled,
.hp-app :where(.hp-btn, .hp-input, .hp-select, .hp-textarea)[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
    .hp-app :where([class^="hp-"], [class*=" hp-"]),
    .hp-app :where([class^="hp-"], [class*=" hp-"])::before,
    .hp-app :where([class^="hp-"], [class*=" hp-"])::after {
        animation-duration: 0.01ms;
        animation-iteration-count: 1;
        scroll-behavior: auto;
        transition-duration: 0.01ms;
    }
}