:root {
    --shadow1: #222020;
    --shadow2: #615959;
    --shadow3: #949494;
    --highlight1: #fff;
    --highlight2: #f7f7f7;
    --highlight3: #e2e2e2;
    --color1: linear-gradient(180deg,#7822be 10%,#8d22be 100%); /* lighter color from the theme */
    --color2: #7822be; /* darker color from the theme */
    --yellow: #d1d126;
    --blue: #63b3e9;
    --green: #64bb64;
    --red: #db2a2a;
    --purple: #e547a1;
    --muted: #eaecf4;
    --color3: #a41ba8;
    --shade1: #430560;
    --shade2: #e6d3f4;
    --shade3: #faf4ff;
    --gradient-text: radial-gradient(ellipse farthest-corner at center center, #7822be 0%, #e547a1 100%);
}

@media (prefers-color-scheme: dark) {
    :root {
        --shadow1: #fff;
        --shadow2: #dbdbdb;
        --shadow3: #bdbdbd;
        --highlight1: #222020;
        --highlight2: #292525;
        --highlight3: #323133;
        --muted: #403f41;
        --color1: linear-gradient(180deg,#7822be 10%,#4b2e64 100%);
        --color2: #fce6fc;
        --color3: #f5c9f8;
        --shade1: #4b2e64;
        --shade2: #473355;
        --shade3: #34223d;
        --yellow: #d1d126;
        --blue: #63b3e9;
        --green: #64bb64;
        --red: #f77575;
        --gradient-text: radial-gradient(ellipse farthest-corner at center center, #b98b2e 0%, #d1d126 100%);
    }

    .static-color {
        --shadow1: #222020;
        --shadow2: #615959;
        --shadow3: #949494;
        --highlight1: #fff;
        --highlight2: #f7f7f7;
        --highlight3: #e2e2e2;
        --color1: linear-gradient(180deg,#7822be 10%,#8d22be 100%); /* lighter color from the theme */
        --color2: #7822be; /* darker color from the theme */
        --yellow: #d1d126;
        --blue: #63b3e9;
        --green: #64bb64;
        --red: #db2a2a;
        --purple: #e547a1;
        --muted: #eaecf4;
        --color3: #a41ba8;
        --shade1: #430560;
        --shade2: #e6d3f4;
        --shade3: #faf4ff;
    }
}