:root {
  --font-family: 'Figtree', sans-serif;
  --scrollbar-track-color: #f1f1f1;
  --scrollbar-thumb-color: #d3d3d3;
  /* --field-border-color: #ccc; */
  --field-border-color--: 172 209 225;
  --field-border-color: rgb(var(--field-border-color--));
  --topbar-bg: #f7f7f7;

  /** -- COLOR VALUES -- **/
  --black--: 35 31 32;
  --red-200--: 249 193 194;
  --red-300--: 255 153 155;
  --red--: 243 71 74;
  --red-dark--: 205 32 31;
  --blue--: 0 150 236;
  --summer-sky--: 0 205 255;
  --light-blue--: 140 185 255;
  --green--: 91 179 0;
  --emerald--: 27 187 0;
  --sea-foam--: 152 217 194;
  --turquoise--: 49 210 200;
  --off-white--: 250 250 250;
  --gray-200--: 230 230 230;
  --gray-300--: 192 192 192;
  --gray-400--: 160 160 160;
  --gray-500--: 128 128 128;
  --orchid--: 201 93 255;
  --violet--: 88 86 214;
  --purple--: 128 0 128;
  --yellow--: 245 181 0;
  --orange--: 243 114 44;
  --orange-dark--: 209 78 5;
  --olive-green--: 144 190 109;
  --persian-green--: 0 169 154;

  /** -- COLORS -- **/
  --black: rgb(var(--black--));
  --red-200: rgb(var(--red-200--));
  --red-300: rgb(var(--red-300--));
  --red: rgb(var(--red--));
  --red-dark: rgb(var(--red-dark--));
  --blue: rgb(var(--blue--));
  --summer-sky: rgb(var(--summer-sky--));
  --light-blue: rgb(var(--light-blue--));
  --green: rgb(var(--green--));
  --emerald: rgb(var(--emerald--));
  --sea-foam: rgb(var(--sea-foam--));
  --turquoise: rgb(var(--turquoise--));
  --off-white: rgb(var(--off-white--));
  --gray-200: rgb(var(--gray-200--));
  --gray-300: rgb(var(--gray-300--));
  --gray-400: rgb(var(--gray-400--));
  --gray-500: rgb(var(--gray-500--));
  --orchid: rgb(var(--orchid--));
  --violet: rgb(var(--violet--));
  --purple: rgb(var(--purple--));
  --yellow: rgb(var(--yellow--));
  --orange: rgb(var(--orange--));
  --orange-dark: rgb(var(--orange-dark--));
  --olive-green: rgb(var(--olive-green--));
  --persian-green: rgb(var(--persian-green--));
}

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

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

.emerald {
  --color--: var(--emerald--);
  --color: var(--emerald);
}

.sea-foam {
  --color--: var(--sea-foam--);
  --color: var(--sea-foam);
}

.turquoise {
  --color--: var(--turquoise--);
  --color: var(--turquoise);
}

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

.blue {
  --color--: var(--blue--);
  --color: var(--blue);
}

.summer-sky {
  --color--: var(--summer-sky--);
  --color: var(--summer-sky);
}

.light-blue {
  --color--: var(--light-blue--);
  --color: var(--light-blue);
}

.gray-200 {
  --color--: var(--gray-200--);
  --color: var(--gray-200);
}

.gray-300 {
  --color--: var(--gray-300--);
  --color: var(--gray-300);
}

.gray-400 {
  --color--: var(--gray-400--);
  --color: var(--gray-400);
}

.gray-500 {
  --color--: var(--gray-500--);
  --color: var(--gray-500);
}

.orchid {
  --color--: var(--orchid--);
  --color: var(--orchid);
}

.violet {
  --color--: var(--violet--);
  --color: var(--violet);
}

.purple {
  --color--: var(--purple--);
  --color: var(--purple);
}

.yellow {
  --color--: var(--yellow--);
  --color: var(--yellow);
}

.orange {
  --color--: var(--orange--);
  --color: var(--orange);
}

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

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