:root {
  --color-emerald: oklch(69% 0.17 162.48);
  --color-yellow: oklch(79% 0.184 86.047);
}

.text-section-1 {
  color: var(--color-primary);
}

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

.hover\:bg-section-1:hover {
  background-color: var(--color-primary);
}

.bg-section-1\/50{
  background-color: color-mix(in oklab,var(--color-primary)50%,#0000)
}

.border-section-1 {
  border-color: var(--color-primary);
}

.text-section-2 {
  color: var(--color-secondary);
}

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

.hover\:bg-section-2:hover {
  background-color: var(--color-secondary);
}

.bg-section-2\/50{
  background-color: color-mix(in oklab,var(--color-secondary)50%,#0000)
}

.border-section-2 {
  border-color: var(--color-secondary);
}

.text-section-3 {
  color: var(--color-accent);
}

.bg-section-3 {
  background-color: var(--color-accent);
}

.hover\:bg-section-3:hover {
  background-color: var(--color-accent);
}

.bg-section-3\/50{
  background-color: color-mix(in oklab,var(--color-accent)50%,#0000)
}

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

.text-section-4 {
  color: var(--color-emerald);
}

.bg-section-4 {
  background-color: var(--color-emerald);
}

.hover\:bg-section-4:hover {
  background-color: var(--color-emerald);
}

.bg-section-4\/50{
  background-color: color-mix(in oklab,var(--color-emerald)50%,#0000)
}

.border-section-4 {
  border-color: var(--color-emerald);
}

.text-section-5 {
  color: var(--color-yellow);
}

.bg-section-5 {
  background-color: var(--color-yellow);
}

.hover\:bg-section-5:hover {
  background-color: var(--color-yellow);
}

.bg-section-5\/50{
  background-color: color-mix(in oklab,var(--color-yellow)50%,#0000)
}

.border-section-5 {
  border-color: var(--color-yellow);
}