@accent: #5070ca;

body {
    @bg-light: #fff;
    @fg-light: #202020;

    @bg-dark: #222229;
    @fg-dark: #eee;

    --accent: @accent;

    .light-mixin() {
        --bg: @bg-light;
        --fg: @fg-light;
        --bg-sec: darken(@bg-light, 30%);
        --fg-sec: lighten(@fg-light, 15%);
        --accent-bg: darken(@bg-light, 10%);
        --accent-hl: darken(@accent, 15%);
    }

    .dark-mixin() {
        --bg: @bg-dark;
        --fg: @fg-dark;
        --bg-sec: lighten(@bg-dark, 15%);
        --fg-sec: darken(@bg-light, 25%);
        --accent-bg: lighten(@bg-dark, 5%);
        --accent-hl: lighten(@accent, 15%);
    }

    .dark-mixin();
    // &.dark {
    &[data-dark="1"] {
        .dark-mixin();
    }
    // &.light {
    &[data-dark="0"] {
        .light-mixin();
    }
    @media (prefers-color-scheme: light) {
        .light-mixin();
    }
}