/*
  Dark theme — component-level overrides.
  Loaded after all component CSS so specificity wins over hardcoded values.
  Only targets elements that use non-token hardcoded colors.
*/

/* ── Adaptive image surfaces ────────────────────────────────────────────── */
/*                                                                           */
/*  Two surface modes for image containers that need theme adaptation:       */
/*                                                                           */
/*  "logo"  — images designed for light backgrounds (logos, brand marks,     */
/*             diagrams with dark/coloured content on transparent or white   */
/*             PNG backgrounds). Dark mode: force white container background  */
/*             so the logo stays readable. The container already has         */
/*             overflow:hidden + border-radius, so no layout change.         */
/*                                                                           */
/*  "photo" — unpredictable photos / avatars (people, objects, scenes with   */
/*             arbitrary colours and brightness). Dark mode: slight          */
/*             brightness + saturation pull-back so vivid photos don't jar   */
/*             against dark UI; hairline ring to separate edge from card bg. */
/*                                                                           */
/*  Anchors:                                                                 */
/*    .item-card__media--logo-plain  → "logo"  (existing class)              */
/*    .entity-card__media            → "photo" (existing class)              */
/*    [data-img-surface="logo"]      → "logo"  (generic attribute)           */
/*    [data-img-surface="photo"]     → "photo" (generic attribute)           */
/*                                                                           */
/*  Usage for new cases — just add the attribute to the wrapper element,     */
/*  no new CSS rules needed:                                                 */
/*    <div class="…" data-img-surface="logo">  <img …>  </div>              */
/*    <div class="…" data-img-surface="photo"> <img …>  </div>              */

[data-theme="dark"] :is(.item-card__media--logo-plain, [data-img-surface="logo"]) {
    background: #ffffff;
}

[data-theme="dark"] :is(.entity-card__media, [data-img-surface="photo"]) {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

[data-theme="dark"] :is(.entity-card__media, [data-img-surface="photo"]) > img {
    filter: brightness(0.88) saturate(0.94);
}

/* ── Action icons: invert dark SVGs to light on dark background ─────────── */
/*    action-icons.css already reads filter: var(--icon-filter, none).      */
/*    SVGs have no explicit fill so they render black; invert makes them     */
/*    light (#d9d9d9 ≈ --theme-text-normal at brightness 0.85).             */
[data-theme="dark"] {
    --icon-filter: invert(1) brightness(0.78); /* ≈ --theme-text-normal #c8cdd5 */
}

/* ── Skeleton shimmer: white sheen → subtle dark highlight ──────────────── */
[data-theme="dark"] [data-word-async-line]::after {
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.05) 50%,
        transparent 80%
    );
}

/* ── Autocomplete / search dropdown shadow ──────────────────────────────── */
[data-theme="dark"] [data-search-dropdown] {
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.45),
        0 8px 32px rgba(0, 0, 0, 0.32);
}

/* ── Modal shell shadow ─────────────────────────────────────────────────── */
[data-theme="dark"] .modal {
    --modal-shell-shadow: 0 24px 52px rgba(0, 0, 0, 0.55);
    --modal-layer-button-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/* ── Analytics priority badges ──────────────────────────────────────────── */
[data-theme="dark"] .analytics-priority-badge--audio {
    background: rgba(217, 119, 6, 0.18);
    color: #e0a040;
}

[data-theme="dark"] .analytics-priority-badge--examples {
    background: rgba(59, 130, 246, 0.14);
    color: #5aace0;
}

/* ── Audio buttons: white PNG icon needs darker background in dark mode ─── */
/*    Dark mode --link-color (#2fc7ae bright teal) gives only ~2:1          */
/*    contrast against the white sound icon — nearly invisible.             */
/*    Override male + female to medium-toned backgrounds (~4.5:1 contrast). */
[data-theme="dark"] .audio-button.male {
    --audio-button-bg: #1a8878;
    background-color: #1a8878;
}
[data-theme="dark"] .audio-button.female {
    --audio-button-bg: #b0536a;
    background-color: #b0536a;
}

/* ── Stats funnel bars ──────────────────────────────────────────────────── */
[data-theme="dark"] .stats-funnel__bar--view {
    background: #2aa07a;
}

[data-theme="dark"] .stats-funnel__bar--audio {
    background: #d4820a;
}

/* ── Audio-words page: hover / selected tones ───────────────────────────── */
[data-theme="dark"] [data-audio-result-item]:hover,
[data-theme="dark"] [data-audio-result-item].is-hovered {
    background: rgba(255, 255, 255, 0.03);
}

[data-theme="dark"] [data-audio-result-item].is-selected,
[data-theme="dark"] [data-audio-result-item][data-selected="true"] {
    background: rgba(45, 201, 176, 0.1);
    border-color: rgba(45, 201, 176, 0.4);
}

/* ── Icon buttons: img-based icons need invert in dark mode ────────────── */
/*    buttons.css sets --button-icon-filter:none on .icon-button which       */
/*    overrides the root --icon-filter from dark-theme. Fix by setting the   */
/*    button-level variable so --icon-filter resolves correctly.              */
[data-theme="dark"] :is(.icon-button, .menu-button, .info-trigger) {
    --button-icon-filter: invert(1) brightness(0.78);
    --button-icon-filter-hover: invert(1) brightness(1.1);
}
[data-theme="dark"] .app-button {
    --app-button-icon-filter: invert(1) brightness(0.78);
    --app-button-icon-filter-hover: invert(1) brightness(1.1);
}

/* ── Header icon buttons: normal brightness in dark mode ───────────────── */
/*    The icon <span> uses background-color:currentColor which inherits      */
/*    'color' from the button. Override background-color directly here so    */
/*    the fix is immune to any custom-property cascade surprises.            */

/* custom-property route (belt) */
[data-theme="dark"] .site-header__trigger {
    --button-chrome-color: var(--theme-text-normal);
    --button-chrome-color-hover: var(--theme-text-strong);
}

/* direct background-color route (suspenders) */
[data-theme="dark"] .site-header__trigger .site-header__icon {
    background-color: var(--theme-text-normal, #c8cdd5);
}
[data-theme="dark"] .site-header__trigger:hover .site-header__icon,
[data-theme="dark"] .site-header__trigger:active .site-header__icon,
[data-theme="dark"] .site-header__trigger:focus-visible .site-header__icon {
    background-color: var(--theme-text-strong, #e8eaed);
}

/* ── View Transitions: circular reveal animation ────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
        animation: none;
        mix-blend-mode: normal;
    }

    ::view-transition-new(root) {
        animation: theme-circle-reveal 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
        mix-blend-mode: normal;
    }
}

@keyframes theme-circle-reveal {
    from {
        clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%));
    }
    to {
        clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 50%));
    }
}