/* Color Palette:
1-Primary, secondary, success, warning, danger, and neutral colors. (done)
Utilities:
2-Background color classes. (done)
3-Text color classes. (done)
4-Border color classes. (done) */

/*  Text colours */
.text-primary {
  color: var(--primary-color);
}

.text-b-text {
  color: var(--body-text);
}

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

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

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

.text-white {
  color: #ffff;
}

/* Clr - series  */
.text-clr-1 {
  color: var(--clr-1);
}

.text-clr-2 {
  color: var(--clr-2);
}
.text-clr-3 {
  color: var(--clr-3);
}
.text-clr-4 {
  color: var(--clr-4);
}
.text-clr-5 {
  color: var(--clr-5);
}
.text-clr-6 {
  color: var(--clr-6);
}

.text-clr-7 {
  color: var(--clr-7);
}

/* Neutrals ---- */

.text-neutral-1 {
  color: var(--neutral-1);
}
.text-neutral-2 {
  color: var(--neutral-2);
}
.text-neutral-3 {
  color: var(--neutral-3);
}
.text-neutral-4 {
  color: var(--neutral-4);
}
.text-neutral-5 {
  color: var(--neutral-5);
}
.text-neutral-6 {
  color: var(--neutral-6);
}
.text-neutral-7 {
  color: var(--neutral-7);
}
.text-neutral-8 {
  color: var(--neutral-8);
}
.text-neutral-9 {
  color: var(--neutral-9);
}
.text-neutral-10 {
  color: var(--neutral-10);
}

/* graph text colors */
.text-graph-clr-1 {
  color: var(--graph-clr-1);
}
.text-graph-clr-2 {
  color: var(--graph-clr-2);
}
.text-graph-clr-3 {
  color: var(--graph-clr-3);
}
.text-graph-clr-4 {
  color: var(--graph-clr-4);
}
.text-graph-clr-5 {
  color: var(--graph-clr-5);
}

/* Indicators */
.text-success {
  color: var(--success-text);
}

/* --------------------------- Background color --------------------------- */

.bg-trans {
  background-color: transparent;
}
.bg-white {
  background-color: #ffff;
}

.bg-primary {
  background-color: var(--primary-color);
}
.bg-b-text {
  background-color: var(--body-text);
}

.bg-border {
  background-color: var(--border);
}

.bg-black {
  background-color: var(--black);
}
.bg-charcoal {
  background-color: var(--charcoal);
}

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

/* clr  series */
.bg-clr-1 {
  background-color: var(--clr-1);
}

.bg-clr-2 {
  background-color: var(--clr-2);
}
.bg-clr-3 {
  background-color: var(--clr-3);
}
.bg-clr-4 {
  background-color: var(--clr-4);
}

.bg-clr-6 {
  background-color: var(--clr-6);
}
.bg-clr-7 {
  background-color: var(--clr-7);
}
.bg-clr-8 {
  background-color: var(--clr-8);
}

/* graph bg colors */
.bg-graph-clr-1 {
  background-color: var(--graph-clr-1);
}
.bg-graph-clr-2 {
  background-color: var(--graph-clr-2);
}
.bg-graph-clr-3 {
  background-color: var(--graph-clr-3);
}
.bg-graph-clr-4 {
  background-color: var(--graph-clr-4);
}
.bg-graph-clr-5 {
  background-color: var(--graph-clr-5);
}

/* Rgba color */
.bg-rgba-1 {
  background-color: var(--rgba-1);
}

/* Indicators */
.bg-success {
  background-color: var(--success-bg);
}
.bg-yellow {
  background-color: var(--yellow);
}

/* Border color ------------------------- */
.border-primary {
  border-color: var(--primary-color) !important;
}
.border-b-text {
  border-color: var(--body-text) !important;
}

.border-border {
  border-color: var(--border) !important;
}

.border-black {
  border-color: var(--black) !important;
}
.border-charcoal {
  border-color: var(--charcoal) !important;
}

.border-bg-black {
  border-color: var(--bg-black) !important;
}

.border-white {
  border-color: #ffff !important;
}

/* clr series */
.border-clr-1 {
  border-color: var(--clr-1) !important;
}

.border-clr-2 {
  border-color: var(--clr-2) !important;
}

.border-clr-3 {
  border-color: var(--clr-3) !important;
}

.border-clr-4 {
  border-color: var(--clr-4) !important;
}

.border-clr-6 {
  border-color: var(--clr-6) !important;
}

.border-clr-7 {
  border-color: var(--clr-7) !important;
}

/* Neutrals */
.border-n-1 {
  border-color: var(--neutral-1) !important;
}
.border-n-2 {
  border-color: var(--neutral-2) !important;
}
.border-n-3 {
  border-color: var(--neutral-3) !important;
}