/* Hand-tuned dark mode fixes for Lumen, loaded after the generated lumen-dark.css.
   The generator converts colours in rules, not Lumen's own tokens, so the card backdrops,
   the pastel tints behind tiles and avatars, and their icon colours are darkened here. */
:where(html[data-color-mode="dark"]) body.lumen {
    --hv-surface: #161b2c;
    --hv-border: #2a3148;
    --hv-thumb: #1f2539;
    --hv-shadow: 0 14px 34px rgba(0, 0, 0, .35);
    --hv-tint-1: #272b55;
    --hv-tint-2: #3a3020;
    --hv-tint-3: #1d3a2e;
    --hv-tint-4: #1c3244;
    --hv-tint-5: #3d2230;
    --hv-tint-6: #2f2650;
    --lm-ink-1: #a5b4fc;
    --lm-ink-2: #fcd34d;
    --lm-ink-3: #6ee7b7;
    --lm-ink-4: #7dd3fc;
    --lm-ink-5: #fda4af;
    --lm-ink-6: #c4b5fd;
}

:where(html[data-color-mode="dark"]) .lm-btn-ghost,
:where(html[data-color-mode="dark"]) .lm-hero-search,
:where(html[data-color-mode="dark"]) .lm-shop-sort .form--control,
:where(html[data-color-mode="dark"]) .lm-filters-open,
:where(html[data-color-mode="dark"]) .lm-filters-close {
    background: var(--hv-surface);
    color: inherit;
}

:where(html[data-color-mode="dark"]) .lm-hero-chips a {
    background: rgba(22, 27, 44, .8);
}

:where(html[data-color-mode="dark"]) .lm-hero-search input {
    color: inherit;
}

/* the hero photo is bright on its left, where the heading sits, so it is dimmed behind a dark wash */
:where(html[data-color-mode="dark"]) .lm-hero {
    background: linear-gradient(120deg, #0b1020 0%, #1a1f3d 100%);
}

:where(html[data-color-mode="dark"]) .lm-hero-img {
    opacity: .35;
}

:where(html[data-color-mode="dark"]) .lm-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 16, 32, .92) 0%, rgba(11, 16, 32, .55) 55%, rgba(11, 16, 32, .1) 100%);
    pointer-events: none;
}

:where(html[data-color-mode="dark"]) .lm-hero .hv-container {
    z-index: 1;
}