/*
conversion from colour names in figma files to this css file:
1. "Primary X" in Figma -> is just "X" in this file. E.g. "Primary Black" = "--black"
2. "Secondary X" -> "X-2". E.g. "Secondary Red" = "--red-2"
3. "Tertiary X" -> "X-3". E.g. "Teriatry Blue" = "--blue-3"
4. "Tertiary Light Element/Usage" -> "Element/Usage-Light". E.g. = "--text-light-3"
5. ambigous naming -> simply name the colour. E.g. "Secondary Color" = "pink"
*/

:root {
  --black: #10052c;
  --white: #ffffff;

  --blue-2: #4353ff;
  --gray-light: #d5d5d5;
  --gray-dark: #c9c8c7;
  --green: #1ce666;
  --orange: #f15c22;
  --pink-light: #FFF4EE;
  --red-3: #E82727;
  --yellow: #FFF25E;

  --text-light-3: #6E6A77;
}

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

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

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

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

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