/* =====================
   Dark mode (auto)
   ===================== */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1c1c1e;
        --bg-secondary: #2c2c2e;
        --card-bg: rgba(44,44,46,.75);
        --border: rgba(255,255,255,.15);

        --text: #f5f5f7;
        --text-muted: #9a9aa1;

        --control-bg: #3a3a3c;
        --shadow-color: rgba(0,0,0,.6);
        /*--box-shadow: 0 10px 30px rgba(0,0,0,.6);*/


        /* Basic colors */
        --clr-primary-text: var(--text);
        --clr-primary-text-low: var(--text-muted);
        --clr-primary-bg: var(--bg);

        --clr-link: var(--clr-primary-text);
        --clr-link-hover: #ae2d33;

        --clr-sidebar-bg: var(--card-bg);
        --clr-sidebar-text: var(--text-muted);
        --clr-sidebar-hover: var(--control-bg);
        --clr-sidebar-active: var(--clr-sidebar-text);

        /* container */
        --clr-container-bg: var(--card-bg);

        /* border */
        --clr-layout-border-line: var(--border);

        /* button */
        --clr-button-hover-bg: var(--control-bg);

        /* form */
        --clr-formcontrol-bg: var(--control-bg);

    }

    /* DESIGN */
    input[type="checkbox"] {
        accent-color: var(--accent-color-30);
    }
    a.btn-outline {
        --clr-button-bg: var(--accent-color-30)
    }
}