/* Dark mode for the whole site (Max, 2026-10-02). Tempo and Sunclax carry
   their own dark palette in tempo.css / sunclax.css; this file gives the
   rest of the site — the home page, the Triada page, the shared header,
   menu, language pill and side bars — the same warm dark ground. Loaded by
   layout.html after glass.css; everything is inside the dark media query, so
   the light pages are untouched. "html body" in front of each rule wins over
   the theme and the pages' own <style> blocks; !important only where a page
   sets the colour inline or with !important itself. */
@media (prefers-color-scheme: dark) {
    :root {
        --dk-ground: #171412;
        --dk-surface: #1E1A17;
        --dk-card: #2A241F;
        --dk-text: #EDE6DB;
        --dk-soft: #B3A99C;
        --dk-line: rgba(237, 230, 219, .14);
        --dk-accent: #F0A35A;
    }

    /* ---- every page: header, menu, language pill, side bars ----------- */
    html body #site-header .main-nav > li > a,
    html body #site-header .main-nav .link-sup,
    html body #site-header a.text-black-80,
    html body #site-header .text-black,
    html body #site-header .nav-trigger,
    html body #site-header .nav-trigger .txt,
    html body #site-header .module-button .btn-txt,
    html body #site-header .lqd-mobile-sec .navbar-brand { color: var(--dk-text) !important; }
    html body #site-header .main-nav > li > a:hover { color: #fff !important; }
    html body #site-header .lqd-mobile-sec .bar { background: var(--dk-text) !important; color: var(--dk-text) !important; }
    /* the desktop "Menu" button is a white circle: the theme draws its lines and
       the × itself — left alone, so the open state is never broken */
    html body #site-header .mobile-navbar-collapse,
    html body #site-header .bg-white { background: var(--dk-surface) !important; }
    html body #site-header .lqd-mobile-main-nav a { color: var(--dk-text) !important; }

    html body .lang-sw__trigger { color: var(--dk-text); border-color: var(--dk-line); }
    html body .lang-sw__trigger:hover { background: rgba(60, 52, 46, .85); }
    html body .lang-sw__menu { background: var(--dk-card); border-color: var(--dk-line); color: var(--dk-text); }
    html body .lang-sw__menu a, html body .lang-sw__menu button { color: var(--dk-text); }

    html body .lqd-stickybar .text-black,
    html body .lqd-stickybar .lqd-scrl-indc,
    html body .lqd-stickybar a { color: var(--dk-text) !important; }
    html body .lqd-stickybar .lqd-scrl-indc-el,
    html body .lqd-stickybar .lqd-scrl-indc-line { background-color: var(--dk-text); }
    html body .lqd-stickybar img[alt="Medium"] { filter: invert(1) brightness(1.4); }
    /* the black tool icons in the "powered by" row (tmux) — light on dark */
    html body img[src*="images/tools/tmux"] { filter: invert(1) brightness(1.2); }

    /* ---- the home page and every theme page: ground and text ---------- */
    /* the theme colours every heading and paragraph from these variables;
       each h1–h6 one is resolved at :root, so all are set again here */
    html body:not(.tempo-page):not(.sunclax-page) {
        background: var(--dk-ground); color: var(--dk-text);
        --lqd-heading-color: #EDE6DB;
        --lqd-h1-color: #EDE6DB; --lqd-h2-color: #EDE6DB; --lqd-h3-color: #EDE6DB;
        --lqd-h4-color: #EDE6DB; --lqd-h5-color: #EDE6DB; --lqd-h6-color: #EDE6DB;
        --lqd-body-text-color: #CFC6BA;
    }
    html body:not(.tempo-page):not(.sunclax-page) h1,
    html body:not(.tempo-page):not(.sunclax-page) h2,
    html body:not(.tempo-page):not(.sunclax-page) h3,
    html body:not(.tempo-page):not(.sunclax-page) h4,
    html body:not(.tempo-page):not(.sunclax-page) h5,
    html body:not(.tempo-page):not(.sunclax-page) h6 { color: var(--dk-text); }
    html body:not(.tempo-page):not(.sunclax-page) #lqd-site-content { background: var(--dk-ground); }
    html body:not(.tempo-page):not(.sunclax-page) .text-black,
    html body:not(.tempo-page):not(.sunclax-page) .text-black-80,
    html body:not(.tempo-page):not(.sunclax-page) .text-gray-800,
    html body:not(.tempo-page):not(.sunclax-page) .text-gray-900,
    html body:not(.tempo-page):not(.sunclax-page) .link-black a { color: var(--dk-text) !important; }
    /* the home page's pastel sections, each a dark tint of its own colour */
    html body:not(.tempo-page):not(.sunclax-page) .bg-red-100 { background-color: #2B1E1C !important; }
    html body:not(.tempo-page):not(.sunclax-page) .bg-blue-100 { background-color: #182230 !important; }
    html body:not(.tempo-page):not(.sunclax-page) .bg-purple-100 { background-color: #231D2F !important; }
    html body:not(.tempo-page):not(.sunclax-page) .bg-slate-100 { background-color: #1C1D21 !important; }
    html body:not(.tempo-page):not(.sunclax-page) .bg-white { background-color: var(--dk-surface) !important; }
    /* the thrown skill pills keep their pale colours, so their ink stays dark */
    html body:not(.tempo-page):not(.sunclax-page) .lqd-throwable-element span,
    html body:not(.tempo-page):not(.sunclax-page) .lqd-throwable-element span.text-black,
    html body:not(.tempo-page):not(.sunclax-page) .lqd-throwable-element b { color: #1B1713 !important; }

    /* ---- the Triada page ------------------------------------------------ */
    html body .tr-bg-soft,
    html body .tr-why-top,
    html body .tr-editions,
    html body .tr-reviews { background: var(--dk-surface) !important; color: var(--dk-text); }
    html body #triada-why { background: #2A2018 !important; border-color: rgba(240, 163, 90, .2) !important; }
    html body .tr-inside,
    html body .tr-dedication,
    html body #triada-methodology,
    html body #triada-faq { background: var(--dk-ground) !important; }
    html body .tr-h2,
    html body .tr-why-top__title,
    html body .tr-faq-q,
    html body .tr-faq-a strong,
    html body .tr-method-card h3,
    html body .tr-method-card__head,
    html body .tr-edition__name,
    html body .tr-edition__device-name,
    html body .tr-marquee__title,
    html body .tr-sample-modal__title,
    html body .tr-sample-modal__choice-label strong,
    html body .tr-discount-banner,
    html body .tr-discount-banner__where,
    html body .tr-inside__item { color: var(--dk-text) !important; }
    html body .tr-lead,
    html body .tr-why-line,
    html body .tr-faq-a,
    html body .tr-method-card p,
    html body .tr-method-card__scale,
    html body .tr-method-readlist,
    html body .tr-method-readlist__sub,
    html body .tr-edition__tagline,
    html body .tr-edition__device-meta,
    html body .tr-marquee__text,
    html body .tr-inside__caption,
    html body .tr-inside__hint,
    html body .tr-dedication__line,
    html body .tr-faq-empty,
    html body .tr-sample-modal__hint,
    html body .tr-sample-modal__choice-label small { color: var(--dk-soft) !important; }
    html body .tr-method-card,
    html body .tr-edition,
    html body .tr-edition__device,
    html body .tr-marquee__item,
    html body .tr-discount-banner,
    html body .tr-sample-modal__box,
    html body .tr-sample-modal__choice { background: var(--dk-card) !important; border-color: var(--dk-line) !important; }
    html body .tr-edition-tab { background: var(--dk-card); border-color: rgba(240, 163, 90, .3); color: var(--dk-text); }
    html body .tr-edition-tab:hover,
    html body .tr-sample-modal__choice:hover { background: #33291F !important; }
    html body .tr-buy-row__coupon,
    html body .tr-discount-banner__item code { background: #33291F !important; color: var(--dk-accent) !important; }
    html body .tr-buy-row__coupon:hover { background: #3D3125 !important; }

    /* the Triada page's own header: a dark frosted bar instead of the white
       one, its text light (its rules name .lqd-head-sec-wrap, so these do too) */
    html body #site-header,
    html body #site-header.is-stuck { background: rgba(23, 20, 18, .88) !important; border-bottom-color: var(--dk-line) !important; }
    html body #site-header .lqd-head-sec-wrap .main-nav > li > a,
    html body #site-header .lqd-head-sec-wrap .navbar-brand,
    html body #site-header .lqd-head-sec-wrap .nav-trigger,
    html body #site-header .lqd-head-sec-wrap .nav-trigger .txt,
    html body #site-header .lqd-head-sec-wrap .module-button a,
    html body #site-header .lqd-mobile-sec .navbar-brand { color: var(--dk-text) !important; }
    html body #site-header .lqd-head-sec-wrap .link-sup { color: var(--dk-soft) !important; }
    html body #site-header .lqd-mobile-sec .bar { background: var(--dk-text) !important; color: var(--dk-text) !important; }
    html body #main-header-collapse.tr-menu-open { background: rgba(23, 20, 18, .96) !important; }

    /* the "Send a message" window: a dark ground instead of its light picture */
    html body #contact-modal .lqd-modal-content { background-image: none !important; background-color: var(--dk-ground) !important; }
    html body #contact-modal input, html body #contact-modal textarea { color: var(--dk-text); border-color: var(--dk-line); background: transparent; }
    /* the picture viewer (lity) opens on dark, its close light */
    html body .lity { background: rgba(14, 12, 10, .94) !important; }
    html body .lity-wrap, html body .lity-container, html body .lity-content,
    html body .lity-image .lity-content, html body .lity-image img { background: transparent !important; box-shadow: none !important; }
    html body .lity-close, html body .lity-close:hover { color: var(--dk-text) !important; }

    /* Triada's orange bands (hero, subscribe) burn on a dark screen: a deeper
       orange there, the same hue */
    html body .tr-bg { background: #8E4A16 !important; }

    /* "Pick your edition" as Liquid Glass: translucent panels with a light edge */
    html body .tr-edition {
        background: rgba(255, 255, 255, .05) !important;
        backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10), 0 0 0 1px rgba(255, 255, 255, .07), 0 24px 60px rgba(0, 0, 0, .45) !important;
        border-radius: 22px;
    }
    html body .tr-edition__device {
        background: rgba(255, 255, 255, .06) !important;
        backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
        border-color: rgba(255, 255, 255, .10) !important; border-radius: 14px;
    }
    html body .tr-edition .tr-guarantee { color: var(--dk-text) !important; }
    html body .tr-edition .tr-guarantee__copy { color: var(--dk-soft) !important; }

    /* the Tempo and Sunclax headers set their own dark text for a light bar;
       name the page so the light text wins, and give Sunclax's bar the dark glass */
    html body.sunclax-page #site-header,
    html body.sunclax-page #site-header.is-stuck { background: rgba(23, 20, 18, .88) !important; border-bottom-color: var(--dk-line) !important; }
    html body.sunclax-page #site-header .lqd-head-sec-wrap .main-nav > li > a,
    html body.sunclax-page #site-header .lqd-head-sec-wrap .navbar-brand,
    html body.sunclax-page #site-header .lqd-head-sec-wrap .nav-trigger,
    html body.sunclax-page #site-header .lqd-head-sec-wrap .nav-trigger .txt,
    html body.sunclax-page #site-header .lqd-head-sec-wrap .module-button a,
    html body.tempo-page #site-header .lqd-head-sec-wrap .main-nav > li > a,
    html body.tempo-page #site-header .lqd-head-sec-wrap .navbar-brand,
    html body.tempo-page #site-header .lqd-head-sec-wrap .nav-trigger,
    html body.tempo-page #site-header .lqd-head-sec-wrap .nav-trigger .txt,
    html body.tempo-page #site-header .lqd-head-sec-wrap .module-button a { color: var(--dk-text) !important; }
    html body.sunclax-page #site-header .lqd-head-sec-wrap .link-sup,
    html body.tempo-page #site-header .lqd-head-sec-wrap .link-sup { color: var(--dk-soft) !important; }
    html body.sunclax-page #main-header-collapse.sx-menu-open,
    html body.tempo-page #main-header-collapse.tp-menu-open { background: rgba(23, 20, 18, .96) !important; }

    /* the app pages' footer (social links, the year) on the dark ground */
    html body.tempo-page .main-footer,
    html body.sunclax-page .main-footer,
    html body.tempo-page .main-footer .footer-content,
    html body.sunclax-page .main-footer .footer-content { background: var(--dk-ground) !important; color: var(--dk-text); }
    html body.tempo-page .main-footer h4, html body.sunclax-page .main-footer h4 { color: var(--dk-text) !important; }
    /* its Get in Touch text and link (back on 2026-10-02) — dark ink on dark otherwise */
    html body.tempo-page .main-footer .lqd-footer-text p,
    html body.sunclax-page .main-footer .lqd-footer-text p { color: var(--dk-soft) !important; }
    html body.tempo-page .main-footer .lqd-footer-cta .btn,
    html body.sunclax-page .main-footer .lqd-footer-cta .btn,
    html body.tempo-page .main-footer .lqd-footer-cta .btn-txt,
    html body.sunclax-page .main-footer .lqd-footer-cta .btn-txt { color: var(--dk-text) !important; }
    html body.tempo-page .main-footer .lqd-footer-cta .btn:hover .btn-txt,
    html body.sunclax-page .main-footer .lqd-footer-cta .btn:hover .btn-txt { color: var(--dk-accent, #F2A65A) !important; }
}