/*
 * Selectable theme matrix: six palettes x three frame languages.
 * Palette selectors only set colour tokens. Layout selectors below them only
 * set geometry and shadow, so every colour is available as Modern / XP / 10.
 */
html:is(
    .vlb-theme--modern_blue,
    .vlb-theme--xp_blue,
    .vlb-theme--windows10_blue
) {
    --vlb-theme-panel:
        radial-gradient(circle at 12% 0, rgba(116, 179, 255, .18), transparent 34%),
        linear-gradient(150deg, rgba(31, 102, 171, .97), rgba(7, 42, 91, .97));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(39, 116, 190, .96), rgba(10, 53, 110, .97));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(77, 123, 166, .96), rgba(33, 68, 108, .96));
    --vlb-theme-subtle: rgba(15, 75, 139, .62);
    --vlb-theme-border: rgba(190, 222, 255, .52);
    --vlb-theme-rule: rgba(190, 222, 255, .24);
    --vlb-theme-text: #f7fbff;
    --vlb-theme-muted: #b9d8f5;
    --vlb-theme-link: #d7ebff;
    --vlb-theme-link-hover: #ffffff;
    --vlb-theme-button: linear-gradient(180deg, #398fd7, #0b4388);
    --vlb-theme-button-hover: linear-gradient(180deg, #58a7e7, #145ca7);
    --vlb-theme-field: #092f63;
    --vlb-theme-panel-solid: rgba(14, 75, 141, .97);
    --vlb-theme-panel-alt-solid: rgba(21, 95, 159, .97);
    --vlb-theme-panel-soft-solid: rgba(53, 95, 136, .97);
    --vlb-theme-button-solid: #1765aa;
    --vlb-theme-button-hover-solid: #2e84ca;
}
html:is(
    .vlb-theme--modern_lightblue,
    .vlb-theme--xp_lightblue,
    .vlb-theme--windows10_lightblue
) {
    --vlb-theme-panel: linear-gradient(150deg, rgba(37, 139, 207, .97), rgba(7, 73, 137, .97));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(55, 151, 216, .96), rgba(12, 87, 154, .97));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(92, 151, 194, .96), rgba(43, 94, 139, .97));
    --vlb-theme-subtle: rgba(28, 116, 180, .64);
    --vlb-theme-border: rgba(222, 243, 255, .76);
    --vlb-theme-rule: rgba(218, 237, 255, .28);
    --vlb-theme-text: #ffffff;
    --vlb-theme-muted: #d2edff;
    --vlb-theme-link: #e2f3ff;
    --vlb-theme-link-hover: #ffffff;
    --vlb-theme-button: linear-gradient(180deg, #35a2e7, #0871bd);
    --vlb-theme-button-hover: linear-gradient(180deg, #5db8ee, #1589d4);
    --vlb-theme-field: #074a83;
    --vlb-theme-panel-solid: rgba(13, 106, 169, .97);
    --vlb-theme-panel-alt-solid: rgba(22, 124, 184, .97);
    --vlb-theme-panel-soft-solid: rgba(71, 126, 165, .97);
    --vlb-theme-button-solid: #1687cf;
    --vlb-theme-button-hover-solid: #2f9fe0;
}
html:is(
    .vlb-theme--modern_darkgreen,
    .vlb-theme--xp_darkgreen,
    .vlb-theme--windows10_darkgreen
) {
    --vlb-theme-panel:
        radial-gradient(circle at 12% 0, rgba(111, 205, 165, .15), transparent 34%),
        linear-gradient(150deg, rgba(40, 91, 77, .97), rgba(9, 33, 27, .97));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(56, 104, 89, .96), rgba(13, 45, 36, .97));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(86, 94, 91, .96), rgba(40, 49, 46, .96));
    --vlb-theme-subtle: rgba(20, 64, 50, .62);
    --vlb-theme-border: rgba(170, 220, 199, .42);
    --vlb-theme-rule: rgba(170, 220, 199, .2);
    --vlb-theme-text: #f6f9f8;
    --vlb-theme-muted: #a9c9bc;
    --vlb-theme-link: #bfe8d3;
    --vlb-theme-link-hover: #ffffff;
    --vlb-theme-button: linear-gradient(180deg, #477a69, #173d31);
    --vlb-theme-button-hover: linear-gradient(180deg, #5b917c, #235443);
    --vlb-theme-field: #10261f;
    --vlb-theme-panel-solid: rgba(22, 63, 52, .97);
    --vlb-theme-panel-alt-solid: rgba(33, 85, 72, .97);
    --vlb-theme-panel-soft-solid: rgba(62, 85, 80, .97);
    --vlb-theme-button-solid: #2b5e4e;
    --vlb-theme-button-hover-solid: #3f7561;
}
html:is(
    .vlb-theme--modern_lightgreen,
    .vlb-theme--xp_lightgreen,
    .vlb-theme--windows10_lightgreen
) {
    --vlb-theme-panel: linear-gradient(150deg, rgba(82, 155, 112, .97), rgba(24, 82, 52, .97));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(102, 171, 131, .96), rgba(36, 101, 67, .97));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(119, 151, 132, .96), rgba(59, 92, 72, .97));
    --vlb-theme-subtle: rgba(55, 128, 84, .62);
    --vlb-theme-border: rgba(225, 255, 236, .68);
    --vlb-theme-rule: rgba(221, 250, 232, .26);
    --vlb-theme-text: #fbfffc;
    --vlb-theme-muted: #d4f1df;
    --vlb-theme-link: #e2f8e9;
    --vlb-theme-link-hover: #ffffff;
    --vlb-theme-button: linear-gradient(180deg, #70b58a, #2d714a);
    --vlb-theme-button-hover: linear-gradient(180deg, #8ac89f, #3c895a);
    --vlb-theme-field: #1d5437;
    --vlb-theme-panel-solid: rgba(50, 111, 74, .97);
    --vlb-theme-panel-alt-solid: rgba(67, 136, 93, .97);
    --vlb-theme-panel-soft-solid: rgba(88, 117, 97, .97);
    --vlb-theme-button-solid: #4d9367;
    --vlb-theme-button-hover-solid: #66ab7d;
}
html:is(
    .vlb-theme--modern_gray,
    .vlb-theme--xp_gray,
    .vlb-theme--windows10_gray
) {
    --vlb-theme-panel: linear-gradient(150deg, rgba(226, 226, 226, .98), rgba(174, 174, 174, .98));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(211, 211, 211, .97), rgba(159, 159, 159, .98));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(235, 235, 235, .98), rgba(190, 190, 190, .98));
    --vlb-theme-subtle: rgba(188, 188, 188, .74);
    --vlb-theme-border: rgba(247, 247, 247, .92);
    --vlb-theme-rule: rgba(55, 55, 55, .25);
    --vlb-theme-text: #111111;
    --vlb-theme-muted: #343434;
    --vlb-theme-link: #003d84;
    --vlb-theme-link-hover: #001f55;
    --vlb-theme-button: linear-gradient(180deg, #f1f1f1, #a7a7a7);
    --vlb-theme-button-hover: linear-gradient(180deg, #ffffff, #bdbdbd);
    --vlb-theme-field: #f5f5f5;
    --vlb-theme-panel-solid: rgba(200, 200, 200, .98);
    --vlb-theme-panel-alt-solid: rgba(183, 183, 183, .98);
    --vlb-theme-panel-soft-solid: rgba(212, 212, 212, .98);
    --vlb-theme-button-solid: #cacaca;
    --vlb-theme-button-hover-solid: #dedede;
}
html:is(
    .vlb-theme--modern_bronze,
    .vlb-theme--xp_bronze,
    .vlb-theme--windows10_bronze
) {
    --vlb-theme-panel: linear-gradient(150deg, rgba(190, 126, 66, .98), rgba(91, 47, 20, .98));
    --vlb-theme-panel-alt: linear-gradient(150deg, rgba(167, 104, 52, .97), rgba(74, 36, 17, .98));
    --vlb-theme-panel-soft: linear-gradient(150deg, rgba(177, 139, 101, .97), rgba(92, 62, 38, .98));
    --vlb-theme-subtle: rgba(113, 65, 27, .65);
    --vlb-theme-border: rgba(247, 221, 185, .78);
    --vlb-theme-rule: rgba(255, 226, 188, .29);
    --vlb-theme-text: #fff8ed;
    --vlb-theme-muted: #ead0af;
    --vlb-theme-link: #ffe1ad;
    --vlb-theme-link-hover: #ffffff;
    --vlb-theme-button: linear-gradient(180deg, #c08046, #633517);
    --vlb-theme-button-hover: linear-gradient(180deg, #d69a60, #7b4622);
    --vlb-theme-field: #482511;
    --vlb-theme-panel-solid: rgba(125, 74, 40, .98);
    --vlb-theme-panel-alt-solid: rgba(102, 56, 32, .98);
    --vlb-theme-panel-soft-solid: rgba(118, 84, 58, .98);
    --vlb-theme-button-solid: #8e512c;
    --vlb-theme-button-hover-solid: #a96436;
}

/* Surface paint is independent from palette, frame, density and quality. */
html.vlb-surface--solid {
    --vlb-theme-panel: var(--vlb-theme-panel-solid, var(--vlb-theme-field));
    --vlb-theme-panel-alt: var(--vlb-theme-panel-alt-solid, var(--vlb-theme-field));
    --vlb-theme-panel-soft: var(--vlb-theme-panel-soft-solid, var(--vlb-theme-field));
    --vlb-theme-button: var(--vlb-theme-button-solid, var(--vlb-theme-subtle));
    --vlb-theme-button-hover: var(--vlb-theme-button-hover-solid, var(--vlb-theme-subtle));
}
html.vlb-surface--solid:not(.vlb-html--transparent) {
    background-image: var(--vlb-wall);
}

html:is(
    .vlb-theme--modern_blue,
    .vlb-theme--modern_lightblue,
    .vlb-theme--modern_darkgreen,
    .vlb-theme--modern_lightgreen,
    .vlb-theme--modern_gray,
    .vlb-theme--modern_bronze
) {
    --vlb-theme-radius: .65rem;
    --vlb-theme-border-width: 1px;
    --vlb-theme-shadow: .35rem .45rem 1.25rem rgba(0, 0, 0, .35);
}
html:is(
    .vlb-theme--xp_blue,
    .vlb-theme--xp_lightblue,
    .vlb-theme--xp_darkgreen,
    .vlb-theme--xp_lightgreen,
    .vlb-theme--xp_gray,
    .vlb-theme--xp_bronze
) {
    --vlb-theme-radius: .5rem;
    --vlb-theme-border-width: 2px;
    --vlb-theme-shadow:
        inset .08rem .08rem 0 rgba(255, 255, 255, .58),
        inset -.08rem -.08rem 0 rgba(0, 17, 50, .72),
        .28rem .38rem .75rem rgba(0, 0, 0, .43);
}
html:is(
    .vlb-theme--windows10_blue,
    .vlb-theme--windows10_lightblue,
    .vlb-theme--windows10_darkgreen,
    .vlb-theme--windows10_lightgreen,
    .vlb-theme--windows10_gray,
    .vlb-theme--windows10_bronze
) {
    --vlb-theme-radius: 0;
    --vlb-theme-border-width: 1px;
    --vlb-theme-shadow: .3rem .3rem 0 rgba(0, 0, 0, .62);
}