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

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

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

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

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

.text-accent {
    color: var(--accent);
}

.back-black {
    background: var(--black);
}

.back-white {
    background: var(--white);
}

.back-green {
    background: var(--green);
}

.back-red {
    background: var(--red);
}

.back-accent {
    background: var(--accent);
}

.back-gray {
    background: var(--gray100);
}

.back-active {
    background: var(--gray200);
}

.back-yellow {
    background: var(--yellow);
}

.border-accent {
    border: 1px solid var(--accent);
}

.border-white {
    border: 1px solid var(--black);
}

.border-gray100 {
    border: 1px solid var(--gray100);
}

.border-gray200 {
    border: 1px solid var(--gray200);
}

.border-gray, .border-gray300 {
    border: 1px solid var(--gray300);
}

.border-gray400 {
    border: 1px solid var(--gray400);
}

.border-gray500 {
    border: 1px solid var(--gray500);
}

a:link {
    color: var(--accent);
}

a:visited {
    color: var(--accent);
}

a:active {
    color: var(--accent);
}