:root {
  --color-1: var(--color-300);
  --color-2: var(--color-400);
  --color-3: var(--color-500);
  --color-4: var(--color-700);
  --color-5: var(--color-800);
  --dark-grey: var(--color-functional-black, #333333);
  --grey-extra-light: var(--color-functional-50, #f2f2f2);
}

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

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

.color-3,
h3,
h3 .givacolor,
h1,
h1 .givacolor,
h2 .givacolor {
  color: var(--color-3);
}
.bg-color-3 {
  background-color: var(--color-3);
}

.color.icons svg polygon, 
.color.icons svg rect, 
.color.icons svg g path, 
.color.icons svg path {
  fill: var(--color-3);
}

.color-4,
.givacolor,
.main-title-text,
.bg-black h3 .givacolor,
.javali-highlights[data-background="white"] .hl-big-text {
  color: var(--color-4);
}

.bg-color-4,
.javali-highlights[data-type="mixed"]::before,
.javali-highlights[data-background="colored"] {
  background-color: var(--color-4);
}

.color-5,
.bg-black a:not(.g-button),
.tab-item-content a {
  color: var(--color-5);
}
.bg-color-5 {
  background-color: var(--color-5);
}

body .node-body .table-scroll .jspHorizontalBar .jspDrag {
  background-color: var(--color-3);
}

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

.border-color-4,
.javali-highlights[data-background="white"] {
  border-color: var(--color-4);
}

.javali-highlights[data-outline="true"] .hl-big-text {
  -webkit-text-stroke: 1px var(--color-4);
}