/* Dark mode: token overrides only; component styles live in ybc.css */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --surface: #1E1E1E;
        --text: #ECECEC;
        --muted: #A8A8A8;
        --border: #2E2E2E;
        /* Brand hue lightened just enough for large headings (3:1+); body-size
           red text can't reach 4.5:1 on-brand, so it uses light text with red accents */
        --heading: #E72B18;
        --accent: #E72B18;
        --accent-text: var(--text);
        --link: var(--text);
        --footer-bg: #0B0B0B;
        --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.35);
    }

    a, .btn-link {
        text-decoration-color: var(--accent);
    }

        a:hover {
            color: #fff;
            text-decoration-thickness: 2px;
        }

    .site-header .navbar {
        --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28236, 236, 236, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

    .site-header .nav-link:hover, .site-header .nav-link:focus-visible {
        color: #fff;
    }

    .card-icon {
        color: var(--accent);
    }

    .date-pill {
        border-left: 3px solid var(--accent);
        padding-left: 0.6rem;
    }

    .valid.modified:not([type=checkbox]) {
        outline: 1px solid #03dac6;
    }

    .invalid {
        outline: 1px solid #cf6679;
    }

    .validation-message {
        color: #cf6679;
    }
}