/* 컬러 변수 */
:root
{
    /*== Gray Color ==*/
    --gray000:#fff;
    --gray005:#f7f7fa;
    --gray010:#eff2f7;
    --gray015:#e7ebee;
    --gray020:#dde1e4;
    --gray030:#c6cbd0;
    --gray040:#aab0b8;
    --gray050:#8c949e;
    --gray060:#696e76;
    --gray070:#484b51;
    --gray080:#3d4046;
    --gray090:#26282c;
    --gray100:#1c1d21;
    --gray110:#121315;
    /* 예외 케이스 */
    --background-color: var(--gray000);
    --g0-to-g9: var(--gray000);
    --g9-to-g10: var(--gray090);
    --g9-to-g11: var(--gray090);
    --g9-to-g40: var(--gray090);
    --g0-to-g70: var(--gray000);
    --g0-to-g15: var(--gray000);
    --g0-to-g20: var(--gray000);
    --g5-to-g10: var(--gray005);
    --g5-to-g15: var(--gray005);
    /*== Tint Color ==*/
    --yellow010:#ffedb0;
    --yellow020:#ffe17c;
    --yellow030:#ffd743;
    --yellow040:#ffcc00;
    --yellow050:#ffbc00;
    --yellow060:#ffa100;
    --yellow070:#ff8f00;
    --yellow080:#f76900;
    /*== Semantic Color ==*/
    --red020:#ffddd6;
    --red050:#ff200c;
    --blue060:#007eff;
    --vip050:#202d40;
    --violet050:#6d6bdd;
    --violet020:#c4c3f1;
    /*== badge bg (성격) ==*/
    --badge-bg-pink:#ffe8fd;
    --badge-bg-orange:#feece1;
    --badge-bg-brown:#fef7e7;
    --badge-bg-green:#e6ffe5;
    --badge-bg-emerald:#e5f7f5;
    --badge-bg-blue:#e7f8fe;
    --badge-bg-violet:#efeefe;
    /*== badge color (성격) ==*/
    --badge-color-pink:#eb4e96;
    --badge-color-orange:#ea5e06;
    --badge-color-brown:#9c703e;
    --badge-color-green:#5e993b;
    --badge-color-emerald:#0c9c89;
    --badge-color-blue:#4c85ff;
    --badge-color-violet:#5d5af7;
    --grade-bg:#75675b;
    --badge-main-green:#0ca793;
    --badge-main-orange:#f36c0c;
    --badge-main-violet:#8250fa;
    /* chart color */
    --chart-color1: #ffcc00;
    --chart-color2: #96c94b;
    --chart-color3: #61a8ca;
    --chart-color4: #7478db;
    --chart-color5: #e57676;
    --chart-color6: #b75b78;
    --chart-color7: #ac7a1f;
    --chart-color8: #4d683e;
    --chart-color9: #484b51;
} 

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        /*== Gray Color ==*/
        --gray000:#121315;
        --gray005:#1c1d21;
        --gray010:#26282c;
        --gray015:#36393e;
        --gray020:#3d4046;
        --gray030:#484b51;
        --gray040:#696e76;
        --gray050:#8c949e;
        --gray060:#aab0b8;
        --gray070:#c6cbd0;
        --gray080:#dde1e4;
        --gray090:#eff2f7;
        --gray100:#f7f7fa;
        --gray110:#fff;
        /* 예외 케이스 */
        --background-color: var(--gray110);
        --g0-to-g9: var(--gray110);
        --g9-to-g10: var(--gray010);
        --g9-to-g11: var(--gray010);
        --g9-to-g40: var(--gray040);
        --g0-to-g70: var(--gray070);
        --g0-to-g15: var(--gray015);
        --g0-to-g20: var(--gray020);
        --g5-to-g10: var(--gray010);
        --g5-to-g15: var(--gray015);
        /*== Tint Color ==*/
        --yellow010:#f76900;
        --yellow020:#ff8f00;
        --yellow030:#ffa100;
        --yellow040:#ffbc00;
        --yellow050:#ffcc00;
        --yellow060:#ffd743;
        --yellow070:#ffe17c;
        --yellow080:#ff8f00;
        /*== Semantic Color ==*/
        --red020:#ffb7a9;
        --red050:#ff5436;
        --blue060:#279fff;
        --vip050:#334158;
        --violet050:#6d6bdd;
        --violet020:#c4c3f1;
        /*== badge bg (성격) ==*/
        --badge-bg-pink:#b84b7f;
        --badge-bg-orange:#b85712;
        --badge-bg-brown:#6b5337;
        --badge-bg-green:#4d7736;
        --badge-bg-emerald:#147a6d;
        --badge-bg-blue:#4069c0;
        --badge-bg-violet:#4c4bba;
        /*== badge color (성격) ==*/
        --badge-color-pink:#ffe8fd;
        --badge-color-orange:#feece1;
        --badge-color-brown:#fef7e7;
        --badge-color-green:#e6ffe5;
        --badge-color-emerald:#dafefa;
        --badge-color-blue:#f9f9f9;
        --badge-color-violet:#efeefe;
        --grade-bg:#75675b;
        --badge-main-green:#0ca793;
        --badge-main-orange:#f36c0c;
        --badge-main-violet:#8250fa;
        /* chart color */
        --chart-color1: #ffcc00;
        --chart-color2: #96c94b;
        --chart-color3: #61a8ca;
        --chart-color4: #7478db;
        --chart-color5: #e57676;
        --chart-color6: #b75b78;
        --chart-color7: #ac7a1f;
        --chart-color8: #4d683e;
        --chart-color9: #484b51;
    }
}