/* light theme */
:root {
    --system-white-1st: #fff;
    --system-white-2nd: #efefef;
    --system-gray-1st: #8e8e93;
    --system-black-1st: #000;
    --system-black-2nd: #1f1f1f;
    --multi-color: linear-gradient(90deg, #f0357c, #f07bc5 50%, #37bdde, #4e7cf0);
    --system-nav: hsla(0, 0%, 100%, 0.3);
}

/* dark theme */
body[theme='dark'] {
    --system-white-1st: #1f1f1f;
    --system-white-2nd: #000;
    --system-gray-1st: #8e8e93;
    --system-black-1st: #efefef;
    --system-black-2nd: #fff;
    --multi-color: linear-gradient(90deg, #f0357c, #f07bc5 50%, #37bdde, #4e7cf0);
    --system-nav: rgba(0, 0, 0, .8);
}