/*
 * Makes Dokka's generated reference sit flush against the VitePress theme, so moving between
 * /learn/ and /api/ does not feel like two different products.
 *
 * Every value below is VitePress's own, read out of the running site with getComputedStyle rather
 * than eyeballed, so the two halves share one palette by construction:
 *
 *              light                       dark
 *   brand      #3451b2                     #a8b1ff
 *   bg         #ffffff                     #1b1b1f
 *   bg alt     #f6f6f7                     #161618
 *   bg soft    #f6f6f7                     #202127
 *   text       #3c3c43                     #dfdfd6
 *   text soft  #67676c                     #98989f
 *   divider    #e2e2e3                     #2e2e32
 *
 * Dokka 2.2 paints from a `--color-*` token family defined in ui-kit.min.css. The older
 * `--background-color` style names in style.css still exist but no longer drive the page — setting
 * only those looks like it works and changes nothing. Both are set here: the ui-kit tokens do the
 * work, the legacy ones catch rules that still reference them.
 *
 * Re-check the token names when Dokka is upgraded; they are internal to its theme.
 */

:root {
    --color-key-blue: #3451b2;
    --color-key-blue-hover: #3a5ccc;
    --color-key-blue-50: rgba(52, 81, 178, 0.5);

    --color-background: #ffffff;
    --color-background-page: #ffffff;
    --color-background-footer: #f6f6f7;

    /* The header stays dark in BOTH themes, which is Dokka's own design and not an oversight.
       Its nav icons are background-image SVGs with white baked into the file — not CSS masks — and
       `.navigation`, `.library-name--link` and `.library-version` all hardcode
       `color: var(--color-text-dt)` regardless of theme. Give the bar a light background and the
       text drops to 1.05:1 contrast and every icon disappears; the only rescue is filter: invert(),
       which would break silently the moment Dokka changes an icon. So it keeps a dark bar, recoloured
       to VitePress's dark surface so it reads as deliberate rather than leftover. */
    --color-background-nav: #161618;
    --color-background-hover: rgba(0, 0, 0, 0.04);
    --color-background-code-block: #f6f6f7;
    --color-background-inline-code: rgba(142, 150, 170, 0.14);

    --color-text: #3c3c43;
    --color-text-light: #67676c;

    /* Legacy names from style.css, kept for rules that still read them. */
    --background-color: #ffffff;
    --default-font-color: #3c3c43;
    --border-color: #e2e2e3;
    --blockquote-background: #f6f6f7;
    --hover-link-color: #3a5ccc;
    --navigation-highlight-color: #3451b2;
    --active-section-color: #3451b2;
    --inactive-section-color: #67676c;
    --sidemenu-section-active-color: #3451b2;
    --active-tab-border-color: #3451b2;
    --footer-background: #f6f6f7;
    --footer-font-color: #67676c;

    --default-font-family: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, sans-serif;
    --default-monospace-font-family: ui-monospace, "Menlo", "Monaco", "Consolas", monospace;

    /* Replaces Dokka's bundled Kotlin mark. The file is supplied via customAssets in the root
       build script, which overwrites images/logo-icon.svg in the generated output. */
    --dokka-logo-image-url: url('../images/logo-icon.svg');
}

.theme-dark {
    --color-key-blue: #a8b1ff;
    --color-key-blue-hover: #c4cbff;
    --color-key-blue-50: rgba(168, 177, 255, 0.5);

    --color-background: #1b1b1f;
    --color-background-page-dt: #1b1b1f;
    /* Same bar as light mode — see the note above. */
    --color-background-nav-dt: #161618;
    --color-background-footer-dt: #202127;
    --color-background-hover: rgba(255, 255, 255, 0.08);
    --color-background-code-block: #202127;
    --color-background-inline-code: rgba(101, 117, 133, 0.16);

    --color-text-dt: #dfdfd6;
    --color-text-light-dt: #98989f;

    --background-color: #1b1b1f;
    --default-font-color: #dfdfd6;
    --border-color: #2e2e32;
    --blockquote-background: #202127;
    --hover-link-color: #c4cbff;
    --navigation-highlight-color: #a8b1ff;
    --active-section-color: #a8b1ff;
    --inactive-section-color: #98989f;
    --sidemenu-section-active-color: #a8b1ff;
    --active-tab-border-color: #a8b1ff;
    --footer-background: #202127;
    --footer-font-color: #98989f;
}

/*
 * Dokka fills the active table-of-contents entry with --color-key-blue and always writes light text
 * on it (`color: var(--color-text-dt)`, regardless of theme). That token has to serve two
 * incompatible roles at once: a fill that light text sits on, and link text read against the page
 * background. In dark mode our accent is a light violet chosen for the second role, so as a fill it
 * left the active item at 1.51:1 and the skip link at 1.57:1 — both far below the 4.5:1 WCAG AA
 * needs, and the skip link is an accessibility affordance in the first place.
 *
 * Dark mode therefore decouples them: a soft tinted surface with accent-coloured text, which is what
 * VitePress does for its own active item. Measured on the deployed page, compositing the translucent
 * fill over the real background: 6.15:1 for the active entry, 7.08:1 for the skip link.
 *
 * Light mode already passes (7.08:1 and 5.86:1) because the accent there is dark enough to carry
 * light text, so it is deliberately left alone.
 */
.theme-dark .toc--part[data-active] > .toc--row .toc--link,
.theme-dark .toc--part[data-active] > .toc--row .toc--button {
    background: rgba(168, 177, 255, 0.16);
    color: #a8b1ff;
}

.theme-dark .toc--skip-link {
    background: #3451b2;
    color: #ffffff;
}

/* The supplied mark is square; Dokka's own is not, so it needs contain rather than cover. */
.library-name--link::before {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.navigation {
    border-bottom: 1px solid var(--border-color);
    box-shadow: none;
}

code,
pre {
    font-family: var(--default-monospace-font-family);
}

.sample-container,
div.symbol {
    border: 1px solid var(--border-color);
    border-radius: 8px;
}

.footer {
    border-top: 1px solid var(--border-color);
}