/* Colors */

:root {
  --white:          #fff;
  --light:          #f2f2f2;
  --dark:           #444;
  --black:          #000;
  --primary:        #00f;
  --secondary:      #ffb900;
  --light-border:   #e7e7e7;
  --dark-border:    #666;
  --valid:          #1ABD00;
  --invalid:        #DF0000;
}

.white              { color: var(--white) }
.light              { color: var(--light) }
.dark               { color: var(--dark) }
.black              { color: var(--black) }
.primary            { color: var(--primary) }
.secondary          { color: var(--secondary) }
.valid              { color: var(--valid) }
.invalid            { color: var(--invalid) }


.bg-white           { background-color: var(--white) }
.bg-light           { background-color: var(--light) }
.bg-dark            { background-color: var(--dark) }
.bg-black           { background-color: var(--black) }
.bg-primary         { background-color: var(--primary) }
.bg-secondary       { background-color: var(--secondary) }
.bg-valid           { background-color: var(--valid) }
.bg-invalid         { background-color: var(--invalid) }
.bg-current         { background-color: currentColor }

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

.fill-white         { fill: var(--white) }
.fill-light         { fill: var(--light) }
.fill-dark          { fill: var(--dark) }
.fill-black         { fill: var(--black) }
.fill-primary       { fill: var(--primary) }
.fill-secondary     { fill: var(--secondary) }
.fill-valid         { fill: var(--valid) }
.fill-invalid       { fill: var(--invalid) }
.fill-current       { fill: currentColor }