/* Background.css: page colours and the layers of the centre panel (Panels.css). The pipes and the water are drawn by Background.js.
   Without JavaScript the panel still has its colour, the paper grid and the two glows. Dark is the default. */

:root {
    --Page: #0B1F33;
    --Grid: rgba(46, 196, 214, 0.05);
    --Glow-Main: rgba(46, 196, 214, 0.10);
    --Glow-Alt: rgba(242, 165, 65, 0.06);
    --Pipe-Cast: rgba(3, 12, 22, 0.34);
    --Pipe-Edge: #0C2439;
    --Pipe-Body: #123049;
    --Pipe-Mid: #173A56;
    --Pipe-Shine: #27546F;
    --Flow-Main: #2EC4D6;
    --Flow-Alt: #F2A541;
    --Pipe-Strength: 0.34;      /* the network is a watermark: change the strength here, not the colours */
    --Flow-Strength: 0.6;
    color-scheme: dark;
}

:root[data-theme="light"] {
    --Page: #F4F7F6;
    --Grid: rgba(14, 124, 140, 0.07);
    --Glow-Main: rgba(14, 124, 140, 0.08);
    --Glow-Alt: rgba(179, 95, 0, 0.05);
    --Pipe-Cast: rgba(11, 31, 51, 0.07);
    --Pipe-Edge: #CBD8DA;
    --Pipe-Body: #D9E4E5;
    --Pipe-Mid: #E4ECEC;
    --Pipe-Shine: #F8FBFB;
    --Flow-Main: #0E7C8C;
    --Flow-Alt: #B35F00;
    --Pipe-Strength: 0.5;
    --Flow-Strength: 0.5;
    color-scheme: light;
}

:root {
    --Paper:
        radial-gradient(40% 34% at 16% 20%, var(--Glow-Main), transparent 70%),
        radial-gradient(36% 32% at 84% 74%, var(--Glow-Alt), transparent 70%),
        linear-gradient(var(--Grid) 1px, transparent 1px) 0 0 / 22px 22px,
        linear-gradient(90deg, var(--Grid) 1px, transparent 1px) 0 0 / 22px 22px;
}

html {
    background: var(--Page);
}

/* The grid and the glows stay still while the centre panel's content scrolls. */
body > main {
    background: var(--Paper);
}

.Background {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

.Background canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.Background .Pipes {
    opacity: var(--Pipe-Strength);
}

.Background .Water {
    opacity: var(--Flow-Strength);
}