/* Colors */

:root {
  --black:          #1C1C1C;
  --white:          #f8f8f8;
  --gray:           #ada8a5;
  --gray-dark:      #8c8682;
  --gray-light:     #f2f2f2;
  --blue:           #00f;
  --yellow:         #ffb900;
  --red:            #d00;
  --valid:          #1ABD00;
  --invalid:        #DF0000;
}

.white              { color: var(--white) }
.black              { color: var(--black) }
.gray               { color: var(--gray) }
.blue               { color: var(--blue) }
.yellow             { color: var(--yellow) }
.red                { color: var(--red) }
.valid              { color: var(--valid) }
.invalid            { color: var(--invalid) }

.bg-white           { background-color: var(--white) }
.bg-black           { background-color: var(--black) }
.bg-gray            { background-color: var(--gray-light) }
.bg-blue            { background-color: var(--blue) }
.bg-yellow          { background-color: var(--yellow) }
.bg-red             { background-color: var(--red) }
.bg-valid           { background-color: var(--valid) }
.bg-invalid         { background-color: var(--invalid) }
.bg-current         { background-color: currentColor }

.border-white       { border-color: var(--white) }
.border-black       { border-color: var(--black) }
.border-gray        { border-color: var(--gray-light) }
.border-valid       { border-color: var(--valid) }
.border-invalid     { border-color: var(--invalid) }
.border-current     { border-color: currentColor }

.fill-white         { fill: var(--white) }
.fill-black         { fill: var(--black) }
.fill-gray          { fill: var(--gray) }
.fill-blue          { fill: var(--blue) }
.fill-yellow        { fill: var(--yellow) }
.fill-red           { fill: var(--red) }
.fill-valid         { fill: var(--valid) }
.fill-invalid       { fill: var(--invalid) }
.fill-current       { fill: currentColor }