@import 'checkbox-color.css';
@import 'combobox-color.css';
@import 'option-color.css';

:root {
    --white: #ffffff;
    --gray: #333333;
    --black: #000000;
    --blue: #0247FE;
    --light-blue: #85A5FF;
    --dark-blue: #00217A;
    --purple: #3D01A4;
    --light-purple: #B285FF;
    --dark-purple: #2D007A;
    --red: #FE2712;
    --light-red: #FE8F84;
    --dark-red: #7A0B00;
    --orange: #FB9B02;
    --light-orange: #FFD085;
    --dark-orange: #7A4B00;
    --yellow: #FFFF33;
    --light-yellow: #FFFF85;
    --dark-yellow: #7A7A00;
    --green: #66B032;
    --light-green: #B7FF85;
    --dark-green: #337A00;
}

.color-white {
    color: var(--white);
}

.color-gray {
    color: var(--gray);
}

.color-black {
    color: var(--black);
}

.color-blue {
    color: var(--blue);
}

.color-light-blue {
    color: var(--light-blue);
}

.color-dark-blue {
    color: var(--dark-blue);
}

.color-purple {
    color: var(--purple);
}

.color-light-purple {
    color: var(--light-purple);
}

.color-dark-purple {
    color: var(--dark-purple);
}

.color-red {
    color: var(--red);
}

.color-light-red {
    color: var(--light-red);
}

.color-dark-red {
    color: var(--dark-red);
}

.color-orange {
    color: var(--orange);
}

.color-light-orange {
    color: var(--light-orange);
}

.color-dark-orange {
    color: var(--dark-orange);
}

.color-yellow {
    color: var(--yellow);
}

.color-light-yellow {
    color: var(--light-yellow);
}

.color-dark-yellow {
    color: var(--dark-yellow);
}

.color-green {
    color: var(--green);
}

.color-light-green {
    color: var(--light-green);
}

.color-dark-green {
    color: var(--dark-green);
}