[data-theme='default'] {
    /* buttons */
    --btn: hsl(270, 100%, 50%);
    --btn_hover: hsl(270, 100%, 40%);
    --btn_txt: hsl(270, 0%, 100%);

    /* header */
    --hdr_bkgr: hsl(270, 100%, 97%);
    --hdr_txt: hsl(270, 100%, 40%);

    /* text */
    --hline: hsl(270, 100%, 40%);
    --txt: hsl(270, 100%, 20%);

    /* backgrounds */
    --bkgr: hsl(270, 100%, 97%);

    /* forms */
    --input_bkgr: hsl(270, 0%, 100%);
    --input_txt: hsl(270, 0%, 20%);
    --input_placeholder: hsl(270, 0%, 60%);

    /* hbars + fbars*/
    --tool_bkgr: hsl(270, 100%, 99%);
    --tool_txt: hsl(270, 100%, 40%);

    /* navigation */
    --nav_bkgr: hsl(270, 100%, 95%);
    --nav_bkgr_open: hsl(270, 100%, 99%);
    --nav_txt: hsl(270, 100%, 55%);
    --nav_line: hsl(270, 100%, 90%);
    --nav_hover: hsl(270, 100%, 98%);
    --nav_hover_txt: hsl(270, 100%, 50%);
    --nav_sel_bkgr: hsl(270, 100%, 75%);
    --nav_sel_txt: hsl(270, 100%, 98%);

    /* details */
    --sum_bkgr: hsl(270, 100%, 55%);
    --det_bkgr: hsl(270, 100%, 99%);
    --sum_txt: hsl(270,100%,99%);
    --det_txt: hsl(270, 0%, 20%);

    /* tables */
    --tbl_bkgr: hsl(270, 100%, 99%);
    --tbl_txt: hsl(270, 100%, 55%);
    --tbl_line: hsl(270, 100%, 90%);
    --tbl_hover: hsl(270, 100%, 95%);
    --tbl_hover_txt: hsl(270, 100%, 50%);
    --tbl_sel_bkgr: hsl(270, 100%, 75%);
    --tbl_sel_txt: hsl(270, 100%, 98%);

    /* icons */
    --icn_bkgr: hsl(270, 100%, 95%);
    --icn_stroke: hsl(270, 100%, 40%);
    --icn_fill: hsl(270, 100%, 30%);
    --icn_hover: hsl(270, 100%, 97%);
    --icn_sel_bkgr: hsl(270, 100%, 70%);
    --icn_sel_stroke: hsl(270, 100%, 98%);

    /* misc */
    --line: hsl(270, 100%, 90%);
}

[data-theme='dodger'] {
    /* buttons */
    --btn: hsl(210, 100%, 50%);
    --btn_hover: hsl(210, 100%, 40%);
    --btn_txt: hsl(210, 0%, 100%);

    /* header */
    --hdr_bkgr: hsl(210, 100%, 97%);
    --hdr_txt: hsl(210, 100%, 40%);

    /* text */
    --hline: hsl(210, 100%, 40%);
    --txt: hsl(210, 100%, 20%);

    /* backgrounds */
    --bkgr: hsl(210, 100%, 97%);

    /* forms */
    --input_bkgr: hsl(210, 0%, 100%);
    --input_txt: hsl(210, 0%, 20%);
    --input_placeholder: hsl(210, 0%, 60%);

    /* bars */
    --tool_bkgr: hsl(210, 100%, 99%);
    --tool_txt: hsl(210, 100%, 40%);

    /* navigation */
    --nav_bkgr: hsl(210, 100%, 95%);
    --nav_bkgr_open: hsl(210, 100%, 99%);
    --nav_txt: hsl(210, 100%, 55%);
    --nav_line: hsl(210, 100%, 90%);
    --nav_hover: hsl(210, 100%, 98%);
    --nav_hover_txt: hsl(210, 100%, 50%);
    --nav_sel_bkgr: hsl(210, 100%, 75%);
    --nav_sel_txt: hsl(210, 100%, 98%);

    /* tables */
    --tbl_bkgr: hsl(210, 100%, 99%);
    --tbl_txt: hsl(210, 100%, 55%);
    --tbl_line: hsl(210, 100%, 90%);
    --tbl_hover: hsl(210, 100%, 95%);
    --tbl_hover_txt: hsl(210, 100%, 50%);
    --tbl_sel_bkgr: hsl(210, 100%, 75%);
    --tbl_sel_txt: hsl(210, 100%, 98%);

    /* icons */
    --icn_bkgr: hsl(210, 100%, 95%);
    --icn_stroke: hsl(210, 100%, 30%);
    --icn_fill: hsl(210, 100%, 30%);
    --icn_hover: hsl(210, 100%, 97%);
    --icn_sel_bkgr: hsl(210, 100%, 70%);
    --icn_sel_stroke: hsl(210, 100%, 98%);

    /* misc */
    --line: hsl(210, 100%, 90%);
}

[data-theme='barbie'] {
    /* buttons */
    --btn: hsl(300, 100%, 70%);
    --btn_hover: hsl(300, 100%, 40%);
    --btn_txt: hsl(300, 0%, 100%);

    /* header */
    --hdr_bkgr: hsl(300, 100%, 97%);
    --hdr_txt: hsl(300, 100%, 50%);

    /* text */
    --hline: hsl(300, 100%, 40%);
    --txt: hsl(300, 100%, 20%);

    /* backgrounds */
    --bkgr: hsl(300, 100%, 98%);

    /* forms */
    --input_bkgr: hsl(300, 0%, 100%);
    --input_txt: hsl(300, 0%, 20%);
    --input_placeholder: hsl(270, 0%, 60%);

    /* navigation */
    --nav_bkgr: hsl(300, 100%, 97%);
    --nav_txt: hsl(300, 100%, 55%);
    --nav_line: hsl(300, 100%, 90%);
    --nav_hover: hsl(300, 100%, 95%);
    --nav_hover_txt: hsl(300, 100%, 50%);
    --nav_sel_bkgr: hsl(300, 100%, 70%);
    --nav_sel_txt: hsl(300, 100%, 98%);

    /* icons */
    --icn_bkgr: hsl(300, 100%, 97%);
    --icn_stroke: hsl(300, 100%, 55%);
    --icn_fill: hsl(300, 100%, 55%);
    --icn_hover: hsl(300, 100%, 95%);
    --icn_sel_bkgr: hsl(300, 100%, 70%);
    --icn_sel_stroke: hsl(300, 100%, 98%);

    /* misc */
    --line: hsl(300, 100%, 90%);
}

[data-theme='classic'] {
    /* buttons */
    --btn: hsl(0, 0%, 50%);
    --btn_hover: hsl(0, 0%, 40%);
    --btn_txt: hsl(0, 0%, 99%);

    /* header */
    --hdr_bkgr: hsl(0, 0%, 98%);
    --hdr_txt: hsl(0, 0%, 10%);

    /* text */
    --hline: hsl(0, 0%, 40%);
    --txt: hsl(0, 0%, 10%);

    /* backgrounds */
    --bkgr: hsl(0, 0%, 99%);

    /* forms */
    --input_bkgr: hsl(3060, 0%, 100%);
    --input_txt: hsl(0, 0%, 10%);
    --input_placeholder: hsl(0, 0%, 60%);

    /* navigation */
    --nav_bkgr: hsl(0, 0%, 98%);
    --nav_txt: hsl(0, 0%, 10%);
    --nav_line: hsl(0, 0%, 90%);
    --nav_hover: hsl(0, 0%, 95%);
    --nav_hover_txt: hsl(0, 0%, 50%);
    --nav_sel_bkgr: hsl(0, 0%,50%);
    --nav_sel_txt: hsl(0, 0%, 98%);

    /* icons */
    --icn_bkgr: hsl(0, 0%, 97%);
    --icn_stroke: hsl(0, 0%, 55%);
    --icn_fill: hsl(0, 0%, 55%);
    --icn_hover: hsl(0, 0%, 95%);
    --icn_sel_bkgr: hsl(0, 0%, 70%);
    --icn_sel_stroke: hsl(0, 0%, 98%);

    /* misc */
    --line: hsl(0, 0%, 90%);
}

[data-theme='dark'] {
    /* buttons */
    --btn: hsl(260, 100%, 50%);
    --btn_hover: hsl(260, 100%, 60%);
    --btn_txt: hsl(0, 0%, 90%);

    /* header */
    --hdr_bkgr: hsl(0, 0%, 15%);
    --hdr_txt: hsl(0, 0%, 90%);

    /* text */
    --hline: hsl(0, 0%, 70%);
    --txt: hsl(0, 0%, 85%);

    /* backgrounds */
    --bkgr: hsl(0, 0%, 10%);

    /* forms */
    --input_bkgr: hsl(0, 0%, 25%);
    --input_txt: hsl(0, 0%, 90%);
    --input_placeholder: hsl(0, 0%, 60%);

    /* navigation */
    --nav_bkgr: hsl(0, 0%, 25%);
    --nav_txt: hsl(0, 0%, 98%);
    --nav_line: hsl(0, 0%, 40%);
    --nav_hover: hsl(0, 0%, 50%);
    --nav_hover_txt: hsl(0, 0%, 50%);
    --nav_sel_bkgr: hsl(0, 0%, 40%);
    --nav_sel_txt: hsl(0, 0%, 90%);

    /* icons */
    --icn_bkgr: hsl(0, 0%, 25%);
    --icn_stroke: hsl(0, 0%, 98%);
    --icn_fill: hsl(0, 0%, 95%);
    --icn_hover: hsl(0, 0%, 35%);
    --icn_sel_bkgr: hsl(0, 0%, 70%);
    --icn_sel_stroke: hsl(0, 0%, 98%);

    /* misc */
    --line: hsl(0, 0%, 40%);
}