.syntax--source.syntax--css {

  .syntax--punctuation {
    &.syntax--separator,
    &.syntax--terminator {
      color: @syntax-text-color;
    }
    &.syntax--property-list.syntax--begin,
    &.syntax--property-list.syntax--end {
      color: @red;
    }
    &.syntax--section.syntax--function {
      color: @cyan;
    }
  }

  .syntax--entity.syntax--name {
    color: @green;
  }
  .syntax--attribute-name.syntax--class,
  .syntax--id {
    color: @blue;
  }
  .syntax--pseudo-element,
  .syntax--pseudo-class {
    color: @orange;
  }

  .syntax--property-value {
    color: @cyan;
  }
  .syntax--constant.syntax--numeric {
    color: @cyan;
    .syntax--unit {
      color: @cyan;
    }
  }
  .syntax--rgb-value {
    color: @cyan;
  }
  .syntax--support.syntax--constant {
    color: @cyan;
    &.syntax--media {
      color: @red;
    }
  }

  .syntax--keyword.syntax--important {
    color: @red;
  }

}


// Less/Sass should have their own files,
// but for just a single override, here should be fine too

.syntax--source.syntax--less,
.syntax--source.syntax--scss {
  .syntax--keyword.syntax--unit {
    color: @cyan;
  }
}