/* ==========================================================================
   Marji — force the brand's light palette regardless of the user's OS theme.

   Phones / browsers will sometimes auto-invert colours or "darken" sites when
   `prefers-color-scheme: dark` is set on the device. The Marji design system
   ships only a light theme, so we declare that intent here and neutralise any
   automatic dark-mode adjustments WebKit / Blink apply to text inputs,
   form controls and the page background.

   This file is loaded immediately after `style.css` from `_Layout` so it has
   the chance to win every cascade vs. dark-mode-targeted overrides shipped by
   user-agent styles.
   ========================================================================== */

/* Tell the browser this site is light-themed only.
   `color-scheme: light` opts out of auto-darkened form controls and
   scrollbars; the `<meta name="color-scheme">` tag in the layout reinforces
   the same intent before the first paint. */
:root {
    /* "only light" is the canonical opt-out that Chrome's Auto Dark Theme honours. */
    color-scheme: only light;
    -webkit-color-scheme: only light;
}

html,
body {
    background: #ffffff;
    color: #0f1f33;
    -webkit-text-fill-color: initial;
    forced-color-adjust: none;
}

/* iOS / Android WebView "Smart Invert" — keep our palette intact. */
@media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
        background: #ffffff !important;
        color: #0f1f33 !important;
    }

    /* Common surface tokens that the design system uses for cards / panels. */
    .card, .auth-card, .contact-card, .product-card, .bi-card,
    .cart-popup, .dropdown-panel, .mega-menu, .site-header, .topbar,
    .site-footer, .filters, .form-control, input, select, textarea {
        background-color: #ffffff !important;
        color: #0f1f33 !important;
    }

    /* Soft surfaces used as section backgrounds stay grey, not inverted. */
    .features-v2, .features-v3, .banks-installments, .section,
    .page-hero, .sg-panel {
        background-color: #f7f8fa !important;
        color: #0f1f33 !important;
    }

    /* Footer keeps its dark navy from the design (it's intentionally dark,
       not the OS's dark-mode rendering). */
    .site-footer { background-color: #0a3d62 !important; color: #cfd6e0 !important; }

    /* Inputs in dark mode often get a white-on-white "autofill" treatment;
       force the design system's neutral. */
    input, select, textarea, .form-control {
        -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
        -webkit-text-fill-color: #0f1f33 !important;
        caret-color: #0f1f33;
        border-color: #e5e7eb !important;
    }

    a { color: inherit; }
    a:hover { color: var(--color-primary, #f9a842); }

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