/*
 * Dark-mode overrides for Redoc's static HTML output. Redoc's `redocly.yaml`
 * theme has no media-query support, so we inject this stylesheet via the
 * custom Handlebars template and override its styled-components rules with
 * `!important` (single-class specificity on both sides).
 *
 * The Descript brand primary (#651A39) leaks into many hashed sc-class rules
 * whose names change between builds; those are handled at build time by
 * `inject-dark-mode.ts`. This file only targets Redoc's stable class names.
 *
 * Contrast is audited against WCAG 2.1 AA in `contrast-check.ts`.
 */

@media (prefers-color-scheme: dark) {
    html,
    body {
        background-color: #110a0d !important;
        color: #e4dde0 !important;
    }

    /* No background on .api-content: its sc-class doesn't set one in light
     * mode either, and painting it opaque hides the absolutely-positioned
     * right panel that lives inside. */
    .redoc-wrap {
        background-color: #110a0d !important;
        color: #e4dde0 !important;
    }

    .api-content {
        color: #e4dde0 !important;
    }

    /* Each sc-class nested inside .menu-content hard-codes its own
     * background:#fafafa, so the bg override has to be broad. The color
     * override is narrower to preserve method-label accents. */
    .menu-content,
    .menu-content div,
    .menu-content ul,
    .menu-content li,
    .menu-content label {
        background-color: #26171d !important;
    }

    .menu-content,
    .menu-content label,
    .menu-content a,
    .menu-content span {
        color: #d1c7cb !important;
    }

    .menu-content {
        border-right: 1px solid #26171d !important;
    }

    .menu-content label:hover {
        background-color: #3f2a32 !important;
        color: #fff7fa !important;
    }

    .menu-content label.active,
    .menu-content li.active > label {
        background-color: #4c343e !important;
        color: #fff7fa !important;
    }

    /* Logo wordmark is baked in as #651A39 — swap to a recolored asset. */
    .menu-content img[src$='descript-logo.svg'] {
        content: url('assets/descript-logo-dark.svg');
    }

    /* `-webkit-text-fill-color` overrides `color` in WebKit/Blink inputs;
     * `opacity:1` defeats the UA's ~54% placeholder dim. */
    .menu-content input,
    .menu-content input[type='text'] {
        background-color: transparent !important;
        color: #e4dde0 !important;
        -webkit-text-fill-color: #e4dde0 !important;
        border: 0 !important;
        border-bottom: 1px solid #8b6f7a !important;
    }

    .menu-content input::placeholder {
        color: #a28993 !important;
        -webkit-text-fill-color: #a28993 !important;
        opacity: 1 !important;
    }

    .menu-content .search-icon path {
        fill: #a28993 !important;
    }

    .menu-content a[href*='redocly.com/redoc'] {
        color: #a28993 !important;
        border-top-color: #26171d !important;
    }

    /* Narrow color list — setting it on every <div> descendant would
     * repaint method labels, status codes, and syntax tokens. */
    .api-content h1,
    .api-content h2,
    .api-content h3,
    .api-content h4,
    .api-content h5,
    .api-content h6,
    .api-content p,
    .api-content li,
    .api-content td,
    .api-content th,
    .api-content label {
        color: #e4dde0 !important;
    }

    /* Maroon-450 (#b96a96) reaches 5.19:1 on #110a0d — subtler than the
     * logo Red-450 (#f73b3b) without dropping under WCAG AA 4.5:1. The
     * original brand maroon #651a39 only reaches ~1.9:1 on #110a0d. */
    .api-content a {
        color: #b96a96 !important;
    }

    .api-content a:hover {
        color: #cc8aaf !important;
    }

    .api-content blockquote {
        border-left-color: #b96a96 !important;
        color: #d1c7cb !important;
    }

    .api-content blockquote strong,
    .api-content blockquote b {
        color: #fff7fa !important;
    }

    .api-content table tr {
        background-color: transparent !important;
        border-top-color: #8b6f7a !important;
    }

    .api-content table tr:nth-child(2n) {
        background-color: #26171d !important;
    }

    .api-content td,
    .api-content th {
        border-color: #8b6f7a !important;
    }

    /* Code blocks, JSON samples, request tabs, and dropdowns are NOT
     * overridden — Redoc's default dark-maroon (#3c1022) reads fine on both
     * page backgrounds, and overriding caused per-line underline artifacts. */

    .api-content hr {
        border-color: #8b6f7a !important;
    }

    ::-webkit-scrollbar-track {
        background-color: #26171d;
    }

    ::-webkit-scrollbar-thumb {
        background-color: #8b6f7a;
    }
}