/* style-dark.css — the dark look of the homepage and the 404 page. Applied
   when the device is set to dark, or when the visitor chose dark with the
   header button (theme_mode_head() in system/lib.php). The header and footer
   in the brand colour and the buttons in the accent colour stay as they are. */

html {
    color-scheme: dark;
}

body {
    background-color: #121417;
    color: #e6e6e6;
}

.theme-toggle .icon-moon {
    display: none;
}

.theme-toggle .icon-sun {
    display: block;
}

.match-selection h2,
.device-links h2,
.about h2,
.lead-text,
.about-item h3 {
    color: #e6e6e6;
}

.lead-points li {
    color: #a0a8b3;
}

.lead-points li::before {
    color: var(--brand-on-dark);
}

.about-lead,
.about-item p {
    color: #cfd5dc;
}

.about-item,
.match-box {
    background-color: #1c2128;
    border-color: #2c333d;
}

.match-box h3 {
    color: #e6e6e6;
}

.match-channel {
    color: #a0a8b3;
}

.match-box:focus-visible {
    outline-color: var(--brand-on-dark);
}

.match-box:focus-visible,
.match-box.active {
    background-color: var(--brand-tint-on-dark);
    border-color: var(--brand-on-dark);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

@media (hover: hover) {
    .match-box:hover {
        background-color: var(--brand-tint-on-dark);
        border-color: var(--brand-on-dark);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
    }
}

.no-matches {
    color: #a0a8b3;
}

.not-found {
    background-color: var(--notice-tint-on-dark);
    border-left-color: var(--notice-stripe-on-dark);
    color: #e6e6e6;
}

.device-links p {
    color: #a0a8b3;
}

.device-link {
    border-color: var(--brand-on-dark);
    color: var(--brand-on-dark);
}

.device-link:hover,
.device-link:focus {
    background-color: var(--brand-on-dark);
    color: #121417;
}