/**
 * Halo components, reimplemented for a plain-HTML target.
 *
 * The site is designed on @happy-orbit/halo. This file is a faithful port of
 * the handful of components the marketing pages actually use — Button, Badge,
 * Card, Divider, Alert, and FormField with its Label, Input and Textarea for
 * the beta sign-up — transcribed from the published library's compiled
 * CSS so the visual result matches the React original. Every value resolves to
 * a token in tokens.css; nothing is hardcoded.
 *
 * House rules that this file encodes:
 *   - Controls are outline-first. `.halo-button--highlight` is the only filled
 *     control in the system: one hero action per view.
 *   - Elevation is a hairline ring plus ambient shadow, never a hard offset.
 *   - Freestanding rules fade to transparent at both ends.
 *
 * If a page needs a component that is not here, port it from the library
 * rather than inventing one.
 */

/* ── Button ─────────────────────────────────────────────────────────── */

.halo-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--halo-space-2);
    width: fit-content;
    font-family: var(--halo-font-display);
    font-weight: var(--halo-weight-heading);
    font-size: var(--halo-text-sm);
    line-height: 1.2;
    letter-spacing: var(--halo-tracking-normal);
    text-decoration: none;
    white-space: nowrap;
    color: var(--halo-color-text);
    background: transparent;
    border: var(--halo-border-width) solid transparent;
    border-radius: var(--halo-radius-md);
    cursor: pointer;
    user-select: none;
    transition:
        background-color var(--halo-duration-fast) var(--halo-easing),
        border-color var(--halo-duration-fast) var(--halo-easing),
        color var(--halo-duration-fast) var(--halo-easing);
}

/* Sizes — md is the default. */
.halo-button {
    height: var(--halo-control-height-md);
    padding-inline: var(--halo-space-4);
}

.halo-button--lg {
    height: var(--halo-control-height-lg);
    padding-inline: var(--halo-space-5);
    font-size: var(--halo-text-md);
}

/* Variants. */
.halo-button--highlight {
    color: var(--halo-color-accent-text);
    background: var(--halo-color-accent);
    border-color: var(--halo-color-accent);
}

.halo-button--highlight:hover {
    background: var(--halo-color-accent-hover);
    color: var(--halo-color-accent-text);
}

.halo-button--highlight:active {
    background: var(--halo-color-accent-active);
}

.halo-button--ghost {
    color: var(--halo-color-accent);
    border-color: transparent;
    padding-inline: var(--halo-space-2);
}

.halo-button--ghost:hover {
    background: color-mix(in srgb, var(--halo-color-accent) 10%, transparent);
    color: var(--halo-color-accent);
}

.halo-button--ghost:active {
    background: color-mix(in srgb, var(--halo-color-accent) 18%, transparent);
}

.halo-button:focus-visible {
    outline: var(--halo-border-width-thick) solid var(--halo-color-focus-ring);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .halo-button {
        transition: none;
    }
}

/* ── Badge ──────────────────────────────────────────────────────────── */

.halo-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--halo-space-2);
    width: fit-content;
    font-family: var(--halo-font-sans);
    font-weight: var(--halo-weight-medium);
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: var(--halo-border-width) solid transparent;
    border-radius: calc(var(--halo-radius-md) * 0.75);
    line-height: 1.4;
    /* variant="solid" is the library default. */
    background: var(--halo-badge-fill);
    color: var(--halo-badge-ink);
}

.halo-badge--sm {
    font-size: var(--halo-text-xs);
    padding: 2px var(--halo-space-3);
}

.halo-badge--neutral {
    --halo-badge-fill: var(--halo-neutral-800);
    --halo-badge-ink: var(--halo-neutral-100);
}

.halo-badge--success {
    --halo-badge-fill: var(--halo-color-success-subtle);
    --halo-badge-ink: var(--halo-color-success);
}

.halo-badge--warning {
    --halo-badge-fill: var(--halo-color-warning-subtle);
    --halo-badge-ink: var(--halo-color-warning);
}

.halo-badge__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--halo-radius-full);
    background: currentColor;
    flex-shrink: 0;
}

/* ── Card ───────────────────────────────────────────────────────────── */

.halo-card {
    display: flex;
    flex-direction: column;
    background: var(--halo-color-surface);
    border-radius: var(--halo-radius-md);
    box-shadow: var(--halo-card-shadow, var(--halo-shadow-md));
    font-family: var(--halo-font-sans);
    color: var(--halo-color-text);
    overflow: hidden;
    min-width: 0;
}

.halo-card--shadow-lg {
    --halo-card-shadow: var(--halo-shadow-lg);
}

/* padding="lg" — the library default. padding="none" leaves the card bare so
   the page can lay out its own edge-to-edge content. */
.halo-card__content {
    padding: var(--halo-space-5);
    font-size: var(--halo-text-sm);
    line-height: var(--halo-leading-normal);
    flex: 1 1 auto;
}

/* ── Divider ────────────────────────────────────────────────────────── */

.halo-divider {
    border: 0;
    margin: 0;
    flex-shrink: 0;
    width: 100%;
    height: var(--halo-divider-weight, 1px);
    background: linear-gradient(
        to right,
        transparent,
        var(--halo-divider-color, var(--halo-color-border)) var(--halo-rule-fade),
        var(--halo-divider-color, var(--halo-color-border))
            calc(100% - var(--halo-rule-fade)),
        transparent
    );
}

.halo-divider--labelled {
    display: flex;
    align-items: center;
    gap: var(--halo-space-4);
    width: 100%;
    height: auto;
    background: none;
}

.halo-divider__rule {
    flex: 1 1 auto;
    height: var(--halo-divider-weight, 1px);
    background: var(--halo-divider-color, var(--halo-color-border));
}

.halo-divider__rule:first-of-type {
    background: linear-gradient(
        to right,
        transparent,
        var(--halo-divider-color, var(--halo-color-border)) var(--halo-rule-fade)
    );
}

.halo-divider__rule:last-of-type {
    background: linear-gradient(
        to left,
        transparent,
        var(--halo-divider-color, var(--halo-color-border)) var(--halo-rule-fade)
    );
}

.halo-divider__label {
    font-family: var(--halo-font-display);
    font-size: var(--halo-text-xs);
    font-weight: var(--halo-weight-medium);
    letter-spacing: var(--halo-tracking-caps);
    text-transform: uppercase;
    color: var(--halo-color-text-muted);
    white-space: nowrap;
}

/* ── Alert ──────────────────────────────────────────────────────────── */

.halo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--halo-space-3);
    padding: var(--halo-space-4);
    background: var(--halo-alert-bg);
    border: var(--halo-border-width) solid
        color-mix(in srgb, var(--halo-alert-accent) 35%, transparent);
    border-inline-start-width: 3px;
    border-inline-start-color: var(--halo-alert-accent);
    border-radius: var(--halo-radius-md);
    font-family: var(--halo-font-sans);
    color: var(--halo-color-text);
}

.halo-alert--info {
    --halo-alert-bg: var(--halo-color-info-subtle);
    --halo-alert-accent: var(--halo-color-info);
}

.halo-alert--success {
    --halo-alert-bg: var(--halo-color-success-subtle);
    --halo-alert-accent: var(--halo-color-success);
}

.halo-alert--danger {
    --halo-alert-bg: var(--halo-color-danger-subtle);
    --halo-alert-accent: var(--halo-color-danger);
}

.halo-alert__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: var(--halo-alert-accent);
    color: var(--halo-color-bg);
    border-radius: var(--halo-radius-full);
    font-family: var(--halo-font-display);
    font-size: var(--halo-text-xs);
    font-weight: var(--halo-weight-heading);
    line-height: 1;
}

.halo-alert__body {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-2);
    flex: 1 1 auto;
    min-width: 0;
}

.halo-alert__title {
    margin: 0;
    font-family: var(--halo-font-display);
    font-size: var(--halo-text-sm);
    font-weight: var(--halo-weight-heading);
}

.halo-alert__message {
    font-size: var(--halo-text-sm);
    line-height: var(--halo-leading-snug);
}

.halo-alert__message p {
    margin: 0;
}

/* ── FormField, Label, Input, Textarea ──────────────────────────────── */

/* FormField stacks a Label, the control, and either helper text or the
   validation message. The React version wires ids and aria for you; here the
   markup carries them. */
.halo-field {
    display: flex;
    flex-direction: column;
    gap: var(--halo-space-2);
    min-width: 0;
}

.halo-field__description,
.halo-field__error {
    margin: 0;
    font-family: var(--halo-font-sans);
    font-size: var(--halo-text-xs);
    line-height: var(--halo-leading-snug);
}

.halo-field__description {
    color: var(--halo-color-text-muted);
}

.halo-field__error {
    color: var(--halo-color-danger);
    font-weight: var(--halo-weight-semibold);
}

/* Captions are small, muted and sentence case. Uppercase is reserved for
   section rules and overlines. */
.halo-label {
    display: inline-flex;
    align-items: center;
    gap: var(--halo-space-1);
    font-family: var(--halo-font-sans);
    font-size: var(--halo-text-xs);
    font-weight: var(--halo-weight-medium);
    color: var(--halo-color-text-muted);
    cursor: pointer;
}

.halo-label__required {
    color: var(--halo-color-danger);
}

/* Shared field chrome — a surface fill inside a hairline border, with the
   accent arriving only on focus. */
.halo-input {
    width: 100%;
    height: var(--halo-control-height-md);
    font-family: var(--halo-font-sans);
    font-size: var(--halo-text-sm);
    color: var(--halo-color-text);
    caret-color: var(--halo-color-accent);
    background: var(--halo-color-surface);
    border: var(--halo-border-width) solid var(--halo-color-border);
    border-radius: var(--halo-radius-md);
    padding-inline: var(--halo-space-4);
    transition:
        border-color var(--halo-duration-fast) var(--halo-easing),
        background-color var(--halo-duration-fast) var(--halo-easing);
}

.halo-input::placeholder {
    color: var(--halo-color-text-subtle);
    opacity: 1;
}

.halo-input:hover:not(:disabled) {
    border-color: var(--halo-color-border-strong);
}

.halo-input:focus {
    outline: none;
    border-color: var(--halo-color-accent);
}

.halo-input:focus-visible {
    outline: var(--halo-border-width-thick) solid var(--halo-color-focus-ring);
    outline-offset: 0;
}

.halo-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--halo-color-surface-sunken);
}

.halo-input[aria-invalid="true"],
.halo-input[aria-invalid="true"]:focus {
    border-color: var(--halo-color-danger);
}

.halo-input--lg {
    height: var(--halo-control-height-lg);
    font-size: var(--halo-text-md);
}

.halo-textarea {
    height: auto;
    padding-block: var(--halo-space-3);
    line-height: var(--halo-leading-normal);
    resize: vertical;
}

/* ── Utilities ──────────────────────────────────────────────────────── */

.halo-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}