:root {
  --snowy-pink: #bb9199;
  --snowy-orange: #f3bb84;
  --snowy-grey: #545454;
  --snowy-cream: #ead9c9;

  --collab-light: var(--snowy-cream);
  --collab-dark: var(--snowy-grey);
  --collab-gradient: -webkit-linear-gradient(
    var(--snowy-cream),
    var(--snowy-pink)
  );
  --collab-gradient-dark: -webkit-linear-gradient(
    var(--snowy-cream),
    var(--snowy-grey)
  );
  /* --collab-gradient: -webkit-linear-gradient(var(--snowy-pink), var(--snowy-cream)); */
  /* --collab-gradient-green-soft: -webkit-radial-gradient(circle, var(--cartos-bright-green) 0%, var(--cartos-dark-green) 70%);
    --collab-gradient-green-sharp: -webkit-radial-gradient(circle, var(--cartos-darker-green) 0%, var(--cartos-dark-green) 70%, var(--cartos-bright-green) 99%); */
}

#landing-hero-transport-location {
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.collab-text {
  color: var(--collab-light);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.collab-colors {
  --bardic-light: var(--collab-light);
  --bardic-dark: var(--collab-dark);
  background: var(--collab-gradient);
}

.collab-background {
  background: var(--collab-dark);
}

.collab-plain-color {
  color: var(--collab-light);
}

.collab-outline {
  --pico-border-color: var(--collab-dark);
  border-image: var(--collab-gradient) 1;
  border-radius: 5px;
  /* this doesn't work */
  border-width: 4px;
  border-style: solid;
}

.collab-box-shadow {
  box-shadow: 0px 0px 10px var(--collab-dark);
}

.feature-container {
  transition: all 0.25s ease-in;

  &:hover {
    transform: scale(1.02);
    box-shadow: 0px 0px 10px var(--collab-dark);
  }
}

.landing-title {
  color: var(--collab-dark);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.landing-title-underline {
  svg {
    color: var(--collab-dark);
    stroke: var(--collab-dark);
  }
}

.feature-title-underline {
  svg {
    color: var(--collab-dark);
    stroke: var(--collab-dark);
  }
}

.feature-title {
  color: var(--collab-light);
  background: var(--collab-gradient);
  background-clip: text;
  fill: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}