/* ==========================================================================
   MovieFlix — theme layer
   Dark is the default (declared in style.css). This file holds theme
   overrides only, so adding a light theme later means editing one file.
   ========================================================================== */

[data-theme='light'] {
    --mf-bg: #f7f7fb;
    --mf-surface: #ffffff;
    --mf-surface-2: #eeeef4;
    --mf-border: rgba(10, 10, 20, .1);
    --mf-text: #14141c;
    --mf-text-muted: #63637a;
    --mf-shadow: 0 10px 30px rgba(20, 20, 40, .1);
    --mf-shadow-lg: 0 24px 60px rgba(20, 20, 40, .16);
}

[data-theme='light'] .mf-navbar.is-scrolled {
    background: rgba(255, 255, 255, .78);
}

[data-theme='light'] .mf-search__input {
    background: rgba(10, 10, 20, .04);
}

[data-theme='light'] .mf-skeleton__poster,
[data-theme='light'] .mf-skeleton__line {
    background: linear-gradient(90deg, #e7e7ef 25%, #f2f2f8 37%, #e7e7ef 63%);
    background-size: 400% 100%;
}

/* Users who prefer a light OS theme still get dark by default: MovieFlix is
   a cinema-style product. Switching is opt-in via [data-theme]. */