:root {
  --planed-primary: #00008B;
  --planed-secondary: #BFD8B8;
  --planed-highlight: #ccfcf2;
  --planed-bg: #6CEFDF;
  --planed-text: #4A4A4A;
}

.bg-planed-primary    { background-color: var(--planed-primary); }
.bg-planed-secondary  { background-color: var(--planed-secondary); }
.bg-planed-highlight  { background-color: var(--planed-highlight); }
.bg-planed-bg         { background-color: var(--planed-bg); }

.text-planed-primary  { color: var(--planed-primary); }
.text-planed-secondary{ color: var(--planed-secondary); }
.text-planed-text     { color: var(--planed-text); }

.hover\:bg-planed-highlight:hover {
  background-color: var(--planed-highlight);
}

.heading-1 {
  font-weight:bold;
  color: var(--planed-primary);
}