/* Dark theme styling */
@media (prefers-color-scheme: dark) {
    html {
        --blockBg: hsl(var(--hue), 25%, 10%);
        --blockBgAlt: hsl(var(--hue), 35%, 15%);
        --blockBgDark: hsla(0, 0%, 0%, 25%);

        --borderRadius: 4px;

        --textColor: hsl(var(--hue), 35%, 90%);
        --textColorHighlight: hsl(var(--hue), 80%, 55%);
        --textColorDim: hsl(var(--hue), 15%, 60%);

        --inputBg: hsl(var(--hue), 40%, 10%);
        --inputHoverBg: hsl(var(--hue), 40%, 15%);
        --inputBorder: hsl(var(--hue), 15%, 25%);
        --inputShadow: hsl(var(--hue), 25%, 25%);
    }

    .banner, header.card {
        --bgColorDark: hsl(160deg, 35%, 13%);
        --bgColorLight: hsl(160deg, 35%, 18%);
        --textColor: hsl(160deg, 33%, 90%);
        --headingColor: hsl(160deg, 36%, 75%);
    }

    .banner:before {
        opacity: .8;
    }

    .block-body.accent h2 {
        color: white;
    }

    .block-body.accent:before {
        opacity: .7;
    }

    .block-footer,
    .panel {
        border-color: hsl(var(--hue), 25%, 20%);
    }

    .block-message {
        background: hsl(var(--hue), 25%, 15%);
        border: 1px solid hsl(var(--hue), 65%, 20%);
        color: hsl(var(--hue), 25%, 80%);
        box-shadow: 0 0 3px hsl(var(--hue), 85%, 25%);
    }

    .user {
        box-shadow: inset 0 0 3px hsl(var(--hue), 25%, 25%);
        background: hsl(var(--hue), 25%, 15%);
    }
}

/* Unfortunately have to dup */
html.theme--dark {
    --blockBg: hsl(var(--hue), 25%, 10%);
    --blockBgAlt: hsl(var(--hue), 35%, 15%);
    --blockBgDark: hsla(0, 0%, 0%, 25%);

    --borderRadius: 4px;

    --textColor: hsl(var(--hue), 35%, 90%);
    --textColorHighlight: hsl(var(--hue), 80%, 55%);
    --textColorDim: hsl(var(--hue), 15%, 60%);

    --inputBg: hsl(var(--hue), 40%, 10%);
    --inputHoverBg: hsl(var(--hue), 40%, 15%);
    --inputBorder: hsl(var(--hue), 15%, 25%);
    --inputShadow: hsl(var(--hue), 25%, 25%);
}

html.theme--dark .banner, html.theme--dark header.card {
    --bgColorDark: hsl(160deg, 35%, 13%);
    --bgColorLight: hsl(160deg, 35%, 18%);
    --textColor: hsl(160deg, 33%, 90%);
    --headingColor: hsl(160deg, 36%, 75%);
}

html.theme--dark .banner:before {
    opacity: .8;
}

html.theme--dark .block-footer,
html.theme--dark .panel {
    border-color: hsl(var(--hue), 25%, 20%);
}

html.theme--dark .block-message {
    background: hsl(var(--hue), 25%, 15%);
    border: 1px solid hsl(var(--hue), 65%, 20%);
    color: hsl(var(--hue), 25%, 80%);
    box-shadow: 0 0 3px hsl(var(--hue), 85%, 25%);
}

html.theme--dark .block-body.accent h2 {
    color: white;
}

html.theme--dark .block-body.accent:before {
    opacity: .7;
}

html.theme--dark .user {
    box-shadow: inset 0 0 3px hsl(var(--hue), 25%, 25%);
    background: hsl(var(--hue), 25%, 15%);
}