/* ----------------------------------------------------
   1. POZADINSKI UZORAK (BACKGROUND PATTERN)
   - neutralne dijagonalne linije preko cijele stranice
   - kombinacija gradijenta i SVG uzorka
   - nalazi se ispod svih elemenata (z-index: -1)
   ---------------------------------------------------- */
.background-pattern {
    position: fixed;
    inset: 0;
    z-index: -1;
    background: var(--bg);

    /* Kombinacija gradijenta i SVG linija */
    background-image:
        linear-gradient(135deg, #9aa3c833 0%, #b8d87e2d 100%),
        url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>\
<g stroke='%23b9d87e' stroke-width='1' opacity='0.35'>\
<line x1='0' y1='0' x2='200' y2='200'/>\
<line x1='-50' y1='0' x2='150' y2='200'/>\
<line x1='50' y1='0' x2='250' y2='200'/>\
<line x1='0' y1='-50' x2='200' y2='150'/>\
<line x1='0' y1='50' x2='200' y2='250'/>\
</g>\
</svg>");

    background-size: cover, 300px 300px;
    filter: blur(0.3px);
}



/* ----------------------------------------------------
   2. POZADINSKI UZORAK — SVJETLA TEMA
   - koristi drugačiju boju linija radi kontrasta
   ---------------------------------------------------- */
.light .background-pattern {
    background-image:
        linear-gradient(135deg, #ffffff23 0%, #c6d6a71f 100%),
        url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 200 200'>\
<g stroke='%239aa3c8' stroke-width='1' opacity='0.4'>\
<line x1='0' y1='0' x2='200' y2='200'/>\
<line x1='-50' y1='0' x2='150' y2='200'/>\
<line x1='50' y1='0' x2='250' y2='200'/>\
<line x1='0' y1='-50' x2='200' y2='150'/>\
<line x1='0' y1='50' x2='200' y2='250'/>\
</g>\
</svg>");
}