/* Shared Neon Trail primitives. Screen-specific composition remains isolated. */
h1,
.wl-display-title,
.wl-hero-title,
.wl-metric-value {
    font-family: var(--wl-font-family-display);
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: calc(var(--wl-border-width) * 2) solid var(--wl-accent-2) !important;
    outline-offset: calc(var(--wl-border-width) * 2) !important;
}

.wl-card {
    padding: var(--wl-space-4);
    border: var(--wl-border-width) solid var(--wl-border);
    border-radius: var(--wl-radius-md);
    background: var(--wl-bg-1);
    box-shadow: none;
    color: var(--wl-text);
}

.wl-card-large {
    border-radius: var(--wl-radius-lg);
}

.wl-card-hero {
    border-color: transparent;
    background: var(--wl-accent);
    color: var(--wl-text);
}

.button {
    display: inline-flex;
    min-height: calc(var(--wl-space-6) + var(--wl-space-3));
    align-items: center;
    justify-content: center;
    gap: var(--wl-space-2);
    padding: var(--wl-space-2) var(--wl-space-4);
    border: var(--wl-border-width) solid transparent;
    border-radius: var(--wl-radius-pill);
    font-size: var(--wl-font-control);
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.button-primary {
    border-color: var(--wl-text);
    background: var(--wl-text);
    color: var(--wl-accent);
}

.button-secondary {
    background: color-mix(in srgb, var(--wl-accent) 20%, var(--wl-bg-1));
    color: var(--wl-text);
}

.button-secondary-accent-2 {
    background: color-mix(in srgb, var(--wl-accent-2) 10%, var(--wl-bg-1));
    color: var(--wl-text);
}

.button-outline {
    border-color: var(--wl-border-2);
    background: transparent;
    color: var(--wl-text);
}

.button-outline-attention {
    border-color: color-mix(in srgb, var(--wl-accent-2) 40%, transparent);
    background: transparent;
    color: var(--wl-accent-2-text-safe);
}

.button:not(:disabled):hover {
    opacity: .82;
}

.button:not(:disabled):active {
    opacity: .68;
}

.button:disabled {
    cursor: default;
    opacity: .5;
}

.wl-badge,
.wl-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--wl-space-1);
    padding: var(--wl-space-1) var(--wl-space-3);
    border-radius: var(--wl-radius-pill);
    color: var(--wl-text);
    font-size: var(--wl-font-caption);
    font-weight: 700;
    line-height: 1;
}

.wl-badge-positive,
.wl-pill-positive {
    background: color-mix(in srgb, var(--wl-accent) 24%, var(--wl-bg-1));
    color: var(--wl-text);
}

.wl-badge-attention,
.wl-pill-attention {
    background: color-mix(in srgb, var(--wl-accent-2) 10%, var(--wl-bg-1));
    color: var(--wl-accent-2-text-safe);
}

.wl-badge-neutral,
.wl-pill-neutral {
    background: var(--wl-neutral-fill-soft);
    color: var(--wl-text);
}