/* ================================================================
   Site-wide aesthetic background
   Soft blue gradient + harmonious wavy contour lines (SVG overlay)
   Loaded last on every layout (overrides layout-specific bg).
   ================================================================ */

html {
    background-color: #f1f6fc;   /* lightened ~50% */
}

body {
    /* Layered: SVG waves on top, gradient base below.
       background-attachment: fixed → the canvas stays still while content scrolls.
       (~50% softer blue than original) */
    background:
        url('/images/wave-bg.svg') center center / cover no-repeat fixed,
        linear-gradient(180deg, #f1f6fc 0%, #e3edf9 45%, #d4e2f3 100%) fixed !important;
    background-color: #f1f6fc !important;
}

/* On smaller devices `background-attachment: fixed` can be expensive / glitchy.
   Fall back to scroll for a smoother experience. */
@media (max-width: 768px) {
    body {
        background-attachment: scroll, scroll !important;
        background-size: cover, auto !important;
    }
}

/* Ensure surfaces above the canvas remain readable.
   (Cards in both layouts already have white/translucent surfaces — no change needed.) */