/* =========================================================
   VERRALINQ DECLARED DARK MODE — VISUALLY PRESERVED LIGHT
   Purpose:
   - Tell browsers the site supports both light and dark schemes
   - When dark mode is requested, keep VerraLinQ's intentional light design
   - Designed to discourage forced browser darkening, especially Samsung Internet
========================================================= */

:root {
    color-scheme: light dark;
}


/* =========================================================
   DECLARED DARK MODE
   This is intentionally still light mode visually.
========================================================= */

@media (prefers-color-scheme: dark) {

    :root {
        color-scheme: light dark;

        --brand-blue: #0147D1;
        --brand-blue-hover: #003FB9;
        --brand-blue-deep: #00349A;
        --brand-blue-soft: #EEF4FF;
        --emerald: #089B53;
        --ink: #0F172A;
        --nav-ink: #111827;
        --muted: #6B7280;
        --white: #FFFFFF;
        --page-bg: #F4F8FF;
        --border: #E5E7EB;
    }

    html,
    body {
        background-color: #F4F8FF !important;
        color: #0F172A !important;
    }

    body {
        background: #F4F8FF !important;
    }

    /* -----------------------------------------------------
       Shared light header preservation
    ------------------------------------------------------ */

    .site-header {
        background: rgba(255, 255, 255, 0.985) !important;
        border-bottom-color: #E5E7EB !important;
    }

    .site-header .nav-link,
    .site-header .login-link {
        color: #101827 !important;
    }

    .site-header .nav-link:hover,
    .site-header .nav-link--active,
    .site-header .login-link:hover {
        color: #0147D1 !important;
    }

    .site-header .nav-link__chevron {
        color: #4B5563 !important;
    }

    .site-header .nav-link:hover .nav-link__chevron,
    .site-header .nav-link--active .nav-link__chevron {
        color: #0147D1 !important;
    }

    /* -----------------------------------------------------
       Native form/control protection
    ------------------------------------------------------ */

    input,
    textarea,
    select,
    button {
        color-scheme: light;
    }

    input,
    textarea,
    select {
        background-color: #FFFFFF;
        color: #0F172A;
    }

    /* -----------------------------------------------------
       Image protection
       Prevent browsers from dimming/inverting key visuals
    ------------------------------------------------------ */

    img,
    picture,
    svg,
    video,
    canvas {
        filter: none !important;
    }
}