/* Text Color Classes */
.red { color: var(--red); } 
.orange { color: var(--orange); } 
.amber { color: var(--amber); } 
.yellow { color: var(--yellow); } 
.lime { color: var(--lime); } 
.green { color: var(--green); } 
.teal { color: var(--teal); } 
.cyan { color: var(--cyan); } 
.blue { color: var(--blue); } 
.indigo { color: var(--indigo); } 
.purple { color: var(--purple); } 
.pink { color: var(--pink); } 

.red-alt { color: var(--red); } 
.green-alt { color: var(--green); } 
.purple-alt { color: var(--purple); } 

.neutral-01 { color: var(--neutral-01); } 
.neutral-02 { color: var(--neutral-02); } 
.neutral-03 { color: var(--neutral-03); } 
.neutral-04 { color: var(--neutral-04); } 
.neutral-05 { color: var(--neutral-05); } 
.neutral-06 { color: var(--neutral-06); } 
.neutral-07 { color: var(--neutral-07); } 
.neutral-08 { color: var(--neutral-08); } 
.neutral-09 { color: var(--neutral-09); } 
.neutral-10 { color: var(--neutral-10); } 
.neutral-11 { color: var(--neutral-11); } 
.neutral-12 { color: var(--neutral-12); } 

/* Background Color Classes */
.bg-red { background-color: var(--red); } 
.bg-orange { background-color: var(--orange); } 
.bg-amber { background-color: var(--amber); } 
.bg-yellow { background-color: var(--yellow); } 
.bg-lime { background-color: var(--lime); } 
.bg-green { background-color: var(--green); } 
.bg-teal { background-color: var(--teal); } 
.bg-cyan { background-color: var(--cyan); } 
.bg-blue { background-color: var(--blue); } 
.bg-indigo { background-color: var(--indigo); } 
.bg-purple { background-color: var(--purple); } 
.bg-pink { background-color: var(--pink); } 

.bg-neutral-01 { background-color: var(--neutral-01); } 
.bg-neutral-02 { background-color: var(--neutral-02); } 
.bg-neutral-03 { background-color: var(--neutral-03); } 
.bg-neutral-04 { background-color: var(--neutral-04); } 
.bg-neutral-05 { background-color: var(--neutral-05); } 
.bg-neutral-06 { background-color: var(--neutral-06); } 
.bg-neutral-07 { background-color: var(--neutral-07); } 
.bg-neutral-08 { background-color: var(--neutral-08); } 
.bg-neutral-09 { background-color: var(--neutral-09); } 
.bg-neutral-10 { background-color: var(--neutral-10); } 
.bg-neutral-11 { background-color: var(--neutral-11); } 
.bg-neutral-12 { background-color: var(--neutral-12); } 

/* Border Color Classes */
.border-purple { border-color: var(--purple); } 
.border-green { border-color: var(--green); } 
.border-red { border-color: var(--red); } 

.input-error { outline: none; color: var(--orange); border: 1px solid var(--red); box-shadow: 0 0 3px var(--red); } 

/* Green links */
a.green { -webkit-text-decoration-color: var(--green); text-decoration-color: var(--green); } 
a.green:focus,
a.green:hover { -webkit-text-decoration-color: var(--green); text-decoration-color: var(--green); } 

/* Red links */
a.red { -webkit-text-decoration-color: var(--red); text-decoration-color: var(--red); } 
a.red:focus,
a.red:hover { -webkit-text-decoration-color: var(--red); text-decoration-color: var(--red); } 

/* Indigo links */
a.indigo { -webkit-text-decoration-color: var(--indigo); text-decoration-color: var(--indigo); } 
a.indigo:focus,
a.indigo:hover { -webkit-text-decoration-color: var(--indigo); text-decoration-color: var(--indigo); } 

/* Purple links */
a.purple { -webkit-text-decoration-color: var(--purple); text-decoration-color: var(--purple); } 
a.purple:focus,
a.purple:hover { -webkit-text-decoration-color: var(--purple); text-decoration-color: var(--purple); } 

/* Purple links */
a.blue { -webkit-text-decoration-color: var(--blue); text-decoration-color: var(--blue); } 
a.blue:focus,
a.blue:hover { -webkit-text-decoration-color: var(--blue); text-decoration-color: var(--blue); } 

.purple-alt, .red-alt, .green-alt { text-decoration: dotted underline; text-decoration-color: var(--neutral-08); }